KnockoutJS - Base Model Architecture

Question

I have a web project where I need to model some basic JavaScript classes and put them in a separate javascript file. Now I want to use them locally on the page and add them to the main view model, which acts as an anchor object. My question is, how do you understand the relationship between the model and the main view model?

This is the class model from api:

Namespace.Problem = function()
{
    var self = this;

    self.identifier = ko.observable();
    self.summary = ko.observable();
    self.title = ko.observable();
};

Namespace.Problem.withJson = function(json)
{
    var problem = new Namespace.Problem();

    problem.identifier(json.identifier);
    problem.summary(json.summary);
    problem.title(json.title);

    return problem;
};

and here is the main view model:

function MasterViewModel()
{
    var self = this;

    self.problem = ko.observable({});

    self.loadData = function()
    {
        // Load data via jQuery.getJson();
        self.problem(Namespace.Problem.withJson(json));
    }
}

I leave the applyBindings function outside the code here.

This is the correct way to have an attribute in the main view model that looks like this above, or should be like

self.problem = new Namespace.Problem();

Are the api class model properties set correctly? Or is the following better?

self.identifier;
self.summary;
self.title

Answer 1

, :

• Model View ViewModel pattern
• JavaScript
• John Papa

a MainViewModel .

document ready event

:

viewModelFactory = function() {
    function MainViewModel(){
        var self = this;

        self.items = ko.observableArray([
            new Page1(),
            new Page2()
        ]);
        self.selectedPage = ko.observable(self.items()[0]);
        self.onSelected = function(page){
            self.selectedPage(page);       
        };
    }

    function PageViewModel(templateName, linkName){
        var self = this;
        self.templateName = templateName;
        self.linkName = linkName;
    }

    function Page1(){
        var self = this;
        $.extend(self, new PageViewModel('template1', 'Page1'));        
        self.data = 'blablabla-blablabla';
    }

    function Page2(){
        var self = this;
        $.extend(self, new PageViewModel('template2', 'Page2'));

        self.people = [
            { name: 'Paul', age: 18, gender: 'male' },
            { name: 'John', age: 25, gender: 'male' },
        ];
    }

    return {
        create: function(){
            return new MainViewModel();
        }
    };
}();

$(function(){
    var mainViewModel = viewModelFactory.create();
    ko.applyBindings(mainViewModel);
})