https://github.com/bigfanjs/mvvmjsapp

Manually implementing MVVM design pattern in JavaScript.
https://github.com/bigfanjs/mvvmjsapp

Last synced: 4 days ago
JSON representation

Manually implementing MVVM design pattern in JavaScript.

• Host: GitHub
• URL: https://github.com/bigfanjs/mvvmjsapp
• Owner: bigfanjs
• Created: 2016-07-31T23:09:38.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-06T23:30:16.000Z (over 8 years ago)
• Last Synced: 2024-11-05T20:16:38.595Z (about 2 months ago)
• Language: JavaScript
• Size: 27.3 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Manually implementing MVVM design pattern in JavaScript.

In this repository I've built a web application on top of an application-level structure using the MVVM design pattern.

As you guys may know, just like MVC and MVP, MVVM helps you split your application into three different components. The key diffrence comes down to how those compoments interact with each other.

We establish a two-way data binding between the view and the view model by passing a 'data-bind' attribute to the view. The ViewModel object exposes an ES6 Proxy so that every time a user action on the view involves accessing a property on the view model which in turn takes it from the model, a [Get] opration fires. And then the Proxy's get/set handlers delegate the operation to the model where they perform any manipulations.

# usage

## .setup()

We instantiate a new model/viewModel using the setup() method.

## .apply()

Wraps the HTML fragment that should be processed by the application.

# Example

const

  model = Model.setup({

    name: 'Adel',

    age: 23

  }),

  view = ViewModel.setup({ model }).apply('#some-elem');

---------------------------------------------------------

My application also supports nested views.

  <span class="span1" >

    <span class="span2" >So far So good!</span>

  </span>

  <ul>

    <li><%= author %></li>

    <li><%= title %></li>

    <li><%= url %></li>

    <li>

      <span data-bind='template: { \"name\": \".inner-template\" }' ></span>

    </li>

  </ul>



const model = Model.setup({

   author: 'Adel',

   title: 'Adel\'s blog',

   url: 'https://Adelsblogs.com'

});

const viewModel = ViewModel.setup({ model });

viewModel.apply('.wrapper');

And here is the final result:

  <ul>

    <li><%= author %></li>

    <li><%= title %></li>

    <li><%= url %></li>

    <li>

      <span data-bind='template: { \"name\": \".inner-template\" }' >

        <span class="span1" >

          <span class="span2" >So far So good!</span>

        </span>

      </span>

    </li>

  </ul>