Knockoutjs映射不具約束力

Question

我想首次使用KnockoutJS映射插件，因爲它可以爲我節省很多代碼。但是，儘管該對象已被映射，但它不受視圖約束。我的代碼如下：

的JavaScript

... 
//global variables 
var mv; 
... 
function viewmodel() { 
    var self = this; 

    self.searchViewModel = ko.mapping.fromJS({}); 
} 
... 
//load function 
$().ready(function() { 
    mv = new viewmodel(); 
    doSearch(); 
    ko.applyBindings(mv); 
... 
} 
function doSearch() { 
    var params = "{'_search':'" + JSON.stringify(searchObject) + "'}"; 
    $("#_pnlMachineList").mask("Loading..."); 

    $.ajax({ 
     type: "POST", 
     url: "machinepark2.aspx/doSearch", 
     data: params, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     dataFilter: function(data) { 
      // This boils the response string down 
      // into a proper JavaScript Object(). 
      var msg = eval('(' + data + ')'); 

      // If the response has a ".d" top-level property, 
      // return what's below that instead. 
      if (msg.hasOwnProperty('d')) 
       return msg.d; 
      else 
       return msg; 
     }, 
     success: function (msg) { 
      ko.mapping.fromJS(msg, {}, mv.searchViewModel); 
     }, 
     error: function (msg) { 
      //document.location = "/errorPage.aspx"; 
     } 
    }); 
} 

HTML

Count: <span data-bind="text: searchViewModel.searchCount"></span> 
<br /> 
<table class="table"> 
    <thead> 
     <tr class="text_bold"> 
      <th>Name</th> 
      <th>Type</th> 
      <th>Model</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: searchViewModel.machines"> 
     <tr style="cursor:pointer;" data-bind="attr: { 'data-guid': GUID }, click: loadmachine"> 
      <td data-bind="text: EndUserMachineName"></td> 
      <td><img alt="" style="position: relative;" data-bind="attr: { src: TypeImage }"></td> 
      <td data-bind="html: ManufacturerModel"></td> 
     </tr> 
    </tbody> 
</table> 

當doSearch功能已被執行，我可以在Firebug控制檯查看mv.searchViewModel。所有屬性都很好地投入可觀：

而且mv.searchViewModel.searchCount（）給我一個整數：2

但伯爵標籤和表中未填寫。我究竟做錯了什麼？

編輯：Firebug不給任何錯誤。

Answer 1

你大多在searchViewModel後面忘了一些（）。以下是更正代碼（小提琴：http://jsfiddle.net/hv9Dx/7/）：

HTML：

Count: <span data-bind="text: searchViewModel().searchCount"></span> 
<br /> 
<table class="table"> 
    <thead> 
     <tr class="text_bold"> 
      <th>Name</th> 
      <th>Type</th> 
      <th>Model</th> 
     </tr> 
    </thead>  
    <tbody data-bind="foreach: searchViewModel().machines"> 
     <tr style="cursor:pointer;" data-bind="attr: { 'data-guid': GUID }"> 
      <td data-bind="text: EndUserMachineName"></td> 
      <td><img alt="" data-bind="attr: { src: TypeImage }" /></td> 
      <td data-bind="text: ManufacturerModel"></td> 
     </tr> 
    </tbody> 
</table> 

JS：

var dataFromServer = { 
    searchCount:5, 
    machines:[{ 
     GUID:"123", 
     EndUserMachineName:"1", 
     TypeImage:"https://i.chzbgr.com/maxW500/7879380224/hE2041EA3/", 
     ManufacturerModel:"lorem lorem" 
    } 
     ] 
} 
var ajaxSim = function(callback){ 
    setTimeout(function(){ 
     callback(dataFromServer); 
    },1000); 
} 

var mv; 

function viewmodel() { 
    var self = this; 
    self.searchViewModel = ko.observable({searchCount:4, machines:[]}); 
} 

mv = new viewmodel(); 
doSearch(); 
ko.applyBindings(mv); 

function doSearch() { 
    ajaxSim(
     function (msg) { 
      console.log(msg) 

      mv.searchViewModel(ko.mapping.fromJS(msg)); 

    }); 
}