在KnockoutJs中綁定多個視圖模型

Question

我正在嘗試解決如何將多個模型從主模型綁定到HTML標記的不同部分。 HTML部分是： -

<ul data-bind="foreach: { data: members}"> 
     <li> 
      <span data-bind="text: MemberId"></span> 
      <span data-bind="text: Name"></span> 
      <span data-bind="text: SwagCompany"></span> 
      <span data-bind="text: SwagThing"></span> 
     </li> 
    </ul> 

<span data-bind="text: winner.Name"></span> 

但無法工作，如何綁定winner.Name，我的模型是這樣的： -

var masterViewModel = { 
    vmA : { ...}, 
    vmB : { ... } 
} 

ko.applyBindings({ 
     winner: ko.observable(masterViewModel.vmB), 
     members: ko.observableArray(mappedData), 
     ... 
    } 

顯然我誤解如何正確applyBindings。我有以下的代碼作爲plunker呈現出什麼，我試圖做一個例子： -

<script> 
$(function() { 

    var masterViewModel = { 
     vmA: function memberViewModel(data) { 
      this.Id = data.MemberId; 
      this.MemberId = ko.observable(data.MemberId); 
      this.Name = ko.observable(data.Name); 
      this.SwagCompany = ko.observable(""); 
      this.SwagThing = ko.observable(""); 
      this.Photo = ko.observable(data.Photo); 
     }, 
     vmB: { 
      Name: "Initial winner..." 
     } 
    }; 

    $.getJSON("/home/memberlist") 
     .then(function (rawData) { 
      return ko.utils.arrayMap(rawData, function (instanceData) { 
       return new masterViewModel.vmA(instanceData); 
      }); 
     }) 
     .done(function (mappedData) { 
      doit(mappedData); 
     }); 

    function doit(mappedData) { 
     ko.applyBindings({ 
      winner: ko.observable(masterViewModel.vmB), 
      members: ko.observableArray(mappedData), 
      getNextWinner: function() { 
       var members = this.members(); 
       var winner = this.winner(); 
       //console.log(ddd.Name()); 
       $.getJSON("/home/nextwinner") 
        .then(function (rawData) { 
         var nextWinner = ko.utils.arrayFirst(members, function (member) { 
          return member.Id === rawData.Winner.MemberId; 
         }); 
         nextWinner.SwagThing(rawData.WonSwag.Thing); 
         nextWinner.SwagCompany(rawData.WonSwag.Company); 
         winner.Name(rawData.Winner.Name); 
        }); 
      } 
     }); 
    } 
}); 
</script> 

Answer 1

你的代碼是很混亂的，因爲你要創建一個視圖模型對象中的applybindings打電話，創建視圖模型對象直。使用構造函數語法，並創建視圖模型的新實例。您需要爲applyBindings執行的操作是爲您的主視圖模型指定一個實例。

以this JSFiddle爲例，儘量保持代碼的結構和組織性，否則會非常快速地變得非常混亂。

// this is like a constructor for your members 
var memberViewModel = function memberViewModel(data) { 
    var self = this; 
    self.Id = data.MemberId; 
    self.MemberId = ko.observable(data.MemberId); 
    self.Name = ko.observable(data.Name); 
}; 

// This is like a constructor for your master view model 
var masterViewModel = function() { 
    var self = this; 
    self.Members = ko.observableArray(); 

    // put two members into Members 
    self.Members.push(new memberViewModel({MemberId: 1, Name: 'Member1'})); 
    self.Members.push(new memberViewModel({MemberId: 2, Name: 'Member2'})); 

    // set the winner to the first one for default, if you want 
    self.Winner = ko.observable(self.Members()[0]); 

    //do your ajax in this function 
    self.GetNextWinner = function() { 
    self.Winner(self.Members()[1]); 
    } 
}; 

//Apply bindings gets one instance of your view model 
ko.applyBindings(new masterViewModel());