Geek asks and answers

MVVM with Knockout.js

I am trying to implement a single-user MVVM-based application and am currently using the Knockout.js framework to handle the viewmodel / view part of MVVM. I am confused, though, since each example that I considered for implementing Knockout involves storing the entire view model in a database. Don't these examples skip the “model” step, where the view model is synchronized with the data level model, and the model checks / synchronizes the server.

I would like to have several different templates / views on the same page, each with a different view model. The other thing I find is missing, but knockout.js synchronizes one model (not viewmodel) through different views. I don’t think it makes sense to have one gigantic presentation model that each viewpoint shares, so I thought that each viewpoint will have its own view model, but each view model will synchronize with the fields of just a few application models that are necessary for every kind.

The page I'm working on selects a gigantic model (30+ fields, several layers of parent / child relationships), and I think it makes sense to just synchronize all my viewing models with this model. I researched Knockback.js (which combines knockout.js and backbone.js), however I ended up rewriting most of the functions like fetching, setting, saving as the page gets data from the API (and I can 'just sync the whole model back and go with the server), so I decided against it.

visual example of my application:

(model layer) M | M

(viewmodel / view layer) VM-V | VM-V | VM-V | VM-B


another example

User = {firstName: "first", lastName: "last",...}

,
ViewModelA = {firstName: app.User.firstName()}
ViewModelB = {firstName: app.User.lastName()}

, / Model Viewmodel? ? ? .

+5
4

, , , MVVM/SPA . , , . - viewmodel/view.

ViewModel - @Tyrsius. viewmodel, . - . , , HTML DOM. - , .

View/ViewModel - viewmodel/view, master viewmodel. DOM . . pub/sub , , , - , Knockout . , - . , viewmodel, ( ), . - . , viewmodel ( ), , .

DataContext , datacontext, . datacontext (: ), datacontext , , , ajax. . Datacontext () viewmodel. , , ( ) datacontext.

... , , , . , .

** : Pluralsight SPA ( Knockout ): -)

+5

, , , .

, , . . MVC3 . Django Ruby db db. . agian, , , .

(ViewModel)

, . viewmodel, App Viewmodel, , . , (, -, ). , . . , . .

Ad Hoc :

​var ThingViewModel = function(name, data){
    this.name = ko.observable(name);
    //Additional viewmodel stuffs
};

var AppViewModel = function(initialData){
    //Process initial data    
    this.thing = new ThingViewModel(someName, someData); 

};

, ( ), , GitHub, . : dev master. , ( , ), .

+2

, WPF -. WPF , .

- , / Automapper. JSON / Knockout (, ), .

/ , "" Javascript, JSON, MVC , , , , , .

, "" , , , , , ( ), , .

In anticipation of this, I structured the model directories on the server side, etc., as well as the structure of my Knockout view models. So far, this approach has worked well. Hope this helps.

+1
source

During the course of the project, I developed a framework (which uses KnockoutJS) that provides decoupled View / ViewModel pairs and allows you to create subview instances in the view. All view and subroutine processing is framed. It works as MVVM with XAML in WPF.

Take a look at http://visto.codeplex.com

0
source

More articles:


All Articles