Knockout Viewmodel建議（多重綁定失敗）

Question

我有一些事情需要作爲觀察對象存儲在我的應用中。我試圖創建單獨的veiwmodels，但是當我將它們綁定時，它清除了其他的。所以我只是要發佈我的基本數據佈局是什麼，看看是否有人願意提出一個方法來定義的ViewModels ...

• 搜索結果
  • 結果名稱
  • 結果類型
• 項目
  • 商品名稱
  • 類型
  • 性能
    • 屬性名稱
    • 屬性值
• 更多？

最大的訣竅是，我想每個項目綁定到一個動態創建的元素，像這樣：

$("<div/>", {              //create new div 
     class: "itemView",            //add css class 
     id: name,              //set ID to item name (may change to array location later?) 
     "data-bind": "template: { name: 'tmplItemView' }" 
    }).appendTo("body").draggable();         //append to the body and make it draggable 
    items[numItems] = new item(); 
    ko.applyBindings(items[numItems], 
     document.getElementById('#' + name)); 

我試圖用這樣的：http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html但是從我收集最好將你的視圖模型定義爲函數，這就是我正在做的事情，我不知道該從哪裏去。

這裏是一切的非功能性撥弄我到目前爲止有：http://jsfiddle.net/MDNAJ/

再次，它列出了所有的結果，你可以點擊一個結果，並獲得與正確的信息的彈出，但搜索結果中消失。

Answer 1

我認爲你在視圖模型概念中缺少的一件事就是對象模型。如果你創建一個對象模型，那麼你可以在你的視圖模型中使用它。在開始編程的過程中，有點像你在你的Main中使用Class來做一些花哨的事情（又稱「面向對象編程」）。

你的項目將有一個ItemModel，它會像這樣（注意對象模型評論）：

//namespace myProj 
var myProj = myProj || {}; 
var myProjViewModel = {}; 

myProj.PageComponent = (function ($, ko) { 
    //OBJECT MODEL 
    function ItemsModel(data) { 
     var self = this; 
     if (data === undefined) { 
      data = {}; //protect the data by creating an empty object 
     } 
     self.name = ko.observable(data.name || ""); 
     self.type = data.parts || ""; 
     self.properties = ko.observableArray(data.properties || []); 
    } 
    //END OBJECT MODEL 

    //KNOCKOUT VIEW-MODEL 
    function PageVM(data) { 
     var self = this; 

     if (data === undefined) { 
      data = {}; //protect the data by creating an empty object 
     } 
     self.searchBy = ko.observable(""); 
     self.resultName = ko.observable(""); 
     self.resultType = ko.observable(""); 
     self.itemsList = ko.observableArray([]); 

     self.searchItem = function() { 
      //ask server for items 
      $.ajax({ 
       url: '/Page/SearchItems', 
       type: 'POST', 
       data: { 
        searchParameters: self.searchBy(); 
        //where searchParameters is a variable required 
        //by the SearchItems function 
        //in the Page Controller 
       }, 
       dataType: "json", 
       traditional: true, 
       success: function (result) { 
        self.load(data); 
       }, 
       error: function() { 
        alert("Error"); 
       } 
      }); 

     }; 
     self.load = function (data) { 
      //load Items into the ViewModel 
      //which triggers an update for the observables 

      //call jQuery map, which makes an array foreach data.items, do the function 
      var mappedItems = $.map(data.Items, function (item) { 
       //calling function and passing data: creating new ItemsModel, passing in the item 
       return new ItemsModel(item); 
      }); 

      self.itemsList(mappedItems); 
     }; 
    } 
    //END KNOCKOUT VIEW-MODEL 

    //PUBLIC METHODS 
    var initModule = function (model) { 
     //viewModel 
     myProjViewModel = new PageVM(model); 
     ko.applyBindings(myProjViewModel); 
    } 
    return { 
     initModule: initModule 
    }; 
    //END PUBLIC METHODS 
})($, ko); 

//put this in view 
//$(document).ready(function() { 
// myProj.PageComponent.initModule(); 
//});