Knockoutjs綁定後用戶點擊鏈接

Question

我是新來javascript/jquery和我正在學習knockoutjs。我被困在這個問題上。我的頁面中有兩個ko綁定。第一個創建用戶點擊的鏈接，以查看有關該項目的更多信息。該鏈接包含一個傳遞給ajax調用的ID，該調用將數據返回給第二個可觀察值。

問題是第二個可觀察數據總是在頁面上顯示爲'undefined'。但是，如果我在創建observable的代碼中放置console.log（data），那麼數據就在那裏。同樣，在Fiddler中，ajax調用請求的json正在被髮回。我敢肯定這與我如何綁定可觀察對象有關，但我嘗試了幾種不同的方法（使用數組，而不是數組等），並且無濟於事。任何幫助或指針將不勝感激。似乎是一個簡單的問題，但我已經竭盡所能，並無法得到它的工作...

$(document).ready(function() { 

     var da = new firstViewModel(); 

     ko.applyBindings(da, document.getElementById('da')); 


     var eq = new secondViewModel(); 
//Binding the second observable here but not using it yet as it depends on getting data from the //first (da) in order to work. 

     ko.applyBindings(eq, document.getElementById('eqdetails')); 

    }); 

    function da(data) { 
      var self = this; 
      self.eqid = ko.observable(data.eqid); 
      self.modelname = ko.observable(data.modelname); 

     } 

    function firstViewModel() { 

     // Data  
     var self = this; 
    self.da = ko.observableArray([]); 

    self.getdetails = function (da) { 

     selectedid = da.eqid(); 

//Call second observable when user clicks on link. 
     var eq = new secondViewModel(); 
     eq.geteqdetails(); 

    } 

    }; 
}; 


    function eqview(data) { 

     console.log('in eqview ' + data); //This works, but data is still undefined in html 
     var self = this; 
     self.modelname = ko.observable(data.modelname); 
     self.number = ko.observable(data.number); 

    }; 

    function secondViewModel() { 

     var self = this; 

     self.eqviews = ko.observableArray([]); 

     self.geteqdetails = function() { 

      $.ajax("../Process/GetEqDetails", { 
       type: "post", 
       contentType: "application/json", 
       data: JSON.stringify({ EqID: selectedid }), 
       success: function (result) { 
        console.log('in ajax call ' + result.data); 

        var mappedequipmentview = $.map(result, function (item) { return new eqview(item) }); 
        self.eqviews(mappedequipmentview); 

       } 
      }); 

     }; 

這裏是頁面的HTML：

<div id="da" class="span3"> 
    <table class="table table-bordered table-striped table-condensed"> 
     <thead> 
      <tr> 
       <th>Model</th> 
       <th>ID</th> 
      </tr> 
     </thead> 
     <tbody data-bind="template: { name: 'datemplate', foreach: da }"> 
     </tbody> 
    </table> 


    <script id="datemplate" type="text/html"> 
     <tr> 
      <td><span data-bind="text: modelname"></span></td> 
      <td> 
       <button type="button" class="btn btn-link" data-bind="click: $root.getdetails" title="View"> 
        <span data-bind="text: eqid"></span></button> 
      </td> 
     </tr> 
    </script> 
</div> 


<div class="span6"> 

    <div class="span1"> 
    <table class="table table-bordered table-condensed" id="eqdetails"> 
     <tbody > 

      <tr> 
       <td><span data-bind="text: $data.modelname "></span></td> 
      </tr> 
      <tr> 
       <td><span data-bind="text: $data.number "></span></td> 
      </tr> 
     </tbody> 
    </table> 


    </div> 



    </div> 

</div> 

Answer 1

我認爲你顯示的代碼有幾個錯誤。

• 當文檔準備就緒時，您正在實例化一個「secondViewModel」，並在其上應用綁定。這很好，但你永遠不會使用它：你在代碼的第33行實例化一個新模型。你不應該那樣做。一旦您爲模型應用了綁定，如果您想更改模型中的數據，則必須保留對此模型的引用。淘汰賽有點神奇，但並不那麼重要：它不知道它必須將您創建的每個secondViewModel綁定到「eqdetails」表。
• 在代碼的第62行中，引用了「selectid」變量，該變量在「geteqdetails」函數的上下文中不存在。您應該將「selectid」作爲參數傳遞給「geteqdetails」函數以便能夠引用它。
• 最後，我不確定你需要兩個視圖模型。我認爲這會讓你的代碼更難以理解和維護。我可能只會使用一個視圖模型。這樣，您就不必保留對secondViewModel的引用來更新其數據。或者，另一種方法是使用路由。