KnockoutJS - 基本模型架構

我有一個Web項目，我需要對一些基本的JavaScript類進行建模並將它們放入單獨的JavaScript文件中。現在我想在頁面上本地使用它們，並將它們添加到作爲綁定對象的主視圖模型中。我的問題是，你如何認識模型類和主視圖模型之間的聯繫？KnockoutJS - 基本模型架構

這是從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; 
};

，這裏的主視圖模型：

function MasterViewModel() 
{ 
    var self = this; 

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

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

我離開這裏applyBindings出功能的代碼。

是否有在主視圖模型的屬性，它看起來像這上面的正確途徑，還是應該像

self.problem = new Namespace.Problem();

是否設置正確的方式API類的模特屬性呢？還是以下更好？

self.identifier; 
self.summary; 
self.title

來源

2014-05-13 Steffen

首先，採取一看：

通常一個MainViewModelaggregates子視圖模式，並改變一個視圖模型另一個通過o bservable綁定。

的easest方式，更方便做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); 
})

這裏是全sample

來源

2014-05-13 13:52:35 GSerjo

KnockoutJS - 基本模型架構

回答

相關問題