在observableArray

Question

單個對象的雙向綁定

我的頁面如下：

<button id="add">Add Data</button> 
<button id="show">show</button> 
<table> 
    <tr style="vertical-align:top"> 
     <td> 
      <table border="1"> 
       <thead> 
        <tr> 
         <th>Id</th> 
         <th>Name</th> 
        </tr> 
       </thead> 
       <tbody data-bind="foreach: students"> 
        <tr> 
         <td data-bind="text: id"></td> 
         <td> 
          <input type="text" data-bind="value: name" /> 
         </td> 
         <td> <a href="javascript:void(0)" data-bind="click: $root.showData">Select</a> 

         </td> 
        </tr> 
       </tbody> 
      </table> 
     </td> 
     <td> 
      <table id="data"> 
       <tbody data-bind="with: selectedData"> 
        <tr> 
         <td>Id</td> 
         <td> 
          <input type="text" data-bind="value: id" /> 
         </td> 
        </tr> 
        <tr> 
         <td>Name</td> 
         <td> 
          <input type="text" data-bind="value: name" /> 
         </td> 
        </tr> 
        <tr> 
         <td></td> 
         <td> 
          <input type="button" value="Close" /> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </td> 
    </tr> 
</table> 

的JavaScript如下：

function ViewModel() { 
    var self = this; 
    self.students = ko.observableArray([]); 
    self.showData = function (dt) { 
     if (window.console) console.log(dt); 
     self.selectedData(dt); 
     $('#data').show(); 
    } 
    this.selectedData = ko.observable(); 
} 
$(function() { 
    window.appViewModel = new ViewModel(); 
    ko.applyBindings(window.appViewModel); 
    $('#add').click(function() { 
     var model = window.appViewModel; 
     $.each(students, function (idx, student) { 
      if (window.console) console.log(student); 
      model.students.push(student); 
     }); 
     $('table').show(); 
    }); 
    $('table').hide(); 
    $('input').click(function() { 
     $('#data').hide(); 
    }); 
    $('#show').click(function() { 
     var s = JSON.stringify(window.appViewModel.students()); 
     alert(s); 
    }); 
}); 

前瞻：

在圖片中，我點擊與id = 3的學生相對應的選擇。另一張表顯示爲t他選擇了學生的細節。假設我在文本框1中輸入了一些內容，文本框2不更新，反之亦然。

如何做到這一點？

小提琴：http://jsfiddle.net/deostroll/YdrQf/1/

Answer 1

你的輸入沒有更新，因爲id和name值不被存儲或結合針對observables，這是特殊的對象，敲除專門爲此目的提供。您可以通過添加一個新的Student類型與您的代碼很容易地解決這個問題：

function Student(data) { 
    this.id = ko.observable(data.id); 
    this.name = ko.observable(data.name); 
}; 

，並用它來與來填充你的students陣列：

$.each(students, function (idx, student) { 
    if (window.console) console.log(student); 
    model.students.push(new Student(student)); 
}); 

有了這些屬性現在被observables，其變動將傳播到用戶界面。這是the fiddle，這兩個小改動。

這就是說，我認爲你很大程度上錯過了淘汰賽的重點。我強烈建議你通過Knockout tutorials，如果你還沒有這樣做。

您使用jQuery爲您的viewmodel創建click函數確實違背了Knockout鼓勵的模型。請查看this fiddle，它使用viewmodel函數將代碼轉換爲100％Knockout，並刪除所有jQuery。