綁定Knockout.JS viewmodel到jQuery對話框

Question

我有一個jQuery模式對話框，我想從Knockout視圖模型傳遞數據。該對話框正常工作 - 但是，下面的代碼被破壞。

理想情況下，我希望能夠點擊觸發模式對話框的URI，並讓對話框從Knockout視圖模型中加載數據。任何幫助將不勝感激。

標記：

<a href="#" id="listNames">List Names</a> 

<div id="listNames" data-bind="dataModel: { autoOpen: false, modal: true }"> 
<div> 
    <form action=''> 
     <p>You have added <span data-bind='text: name().length'>&nbsp;</span> 
      person(s)</p> 
     <table data-bind='visible: name().length > 0'> 
      <thead> 
       <tr><th>Select</th> 
        <th>Name</th> 
        <th>Age</th> 
        <th /> 
       </tr> 
      </thead> 
      <tbody data-bind='foreach: metrics'> 
       <tr> 
        <td><input type="checkbox" /></td> 
        <td><span data-bind='text: name' >&nbsp;</span></td> 
        <td><span data-bind='text: age'>&nbsp;</span></td> 
       </tr> 
      </tbody> 
     </table> 
    </form> 
    </div> 
</div> 

視圖模型：

var dataModel = function (edata) { 
    var self = this; 
    self.edata = ko.observableArray(edata); 

    self.addname = function() { 
     self.edata.push({ 
      name: "", 
      age: "" 
     }); 
    }; 

    self.removename = function (name) { 
     self.edata.remove(name); 
    }; 

    self.save = function (form) { 
     alert("Could now transmit to server: " 
       + ko.utils.stringifyJson(self.edata)); 
     // To actually transmit to server as a regular form post, write this: 
     // ko.utils.postJson($("form")[0], self.edata); 
    }; 
}; 

var viewModel = new dataModel([ 
    { name: "Jack", age: "41" }, 
    { name: "Jill", age: "33" } 
]); 
ko.applyBindings(new viewModel); 

jQuery的對話框：

$("#listNames, ").dialog({ 
    autoOpen: false, 
    width: 300, 
    modal: true, 
    buttons: { 
     "OK": function() { 
      $(this).dialog("destroy"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

$("#openList") 
    .click(function() { 
     $("#listNames").dialog("open"); 
    }); 

Answer 1

有幾個埃羅rs在您發佈的代碼中。 我這裏有一個工作版本：http://jsfiddle.net/uFgz8/1/

下面是HTML：

 <a href="#" data-bind="click: $root.openDialog"> Open dialog </a> //you had 2 elements with the same ID, I removed the ID on the link and bound it to a method in the view model 

    <div id="listNames"> <div> 
      <form action=''> 
       <p>You have added <span data-bind='text: name.length'>&nbsp;</span> person(s)</p> // name item is not observable, so you cannot use name().length 
       <table data-bind='visible: name.length > 0'> // same remark for name 
        <thead> 
         <tr> 
          <th>Select</th> 
          <th>Name</th> 
          <th>Age</th> 
          <th /> 
         </tr> 
        </thead> 
        <tbody data-bind='foreach: edata'> 
         <tr> 
          <td> 
           <input type="checkbox" /> 
          </td> 
          <td><span data-bind='text: name'>&nbsp;</span> 

          </td> 
          <td><span data-bind='text: age'>&nbsp;</span> 

          </td> 
         </tr> 
        </tbody> 
       </table> 
      </form> 
     </div> 
    </div> 

的JS：

$("#listNames").dialog({ 
    autoOpen: false, 
    width: 300, 
    modal: true, 
    buttons: { 
     "OK": function() { 
      // do something 
      $(this).dialog("close"); // I replaced destroy by close, so it can be opened after ok has been clicked 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

var dataModel = function (edata) { 
    var self = this; 
    self.edata = ko.observableArray(edata); 

    self.addname = function() { 
     self.edata.push({ 
      name: "", 
      age: "" 
     }); 
    }; 

    self.openDialog = function() { 
     $("#listNames").dialog("open"); 
    }; 

    self.removename = function (name) { 
     self.edata.remove(name); 
    }; 

    self.save = function (form) { 
     alert("Could now transmit to server: " + ko.utils.stringifyJson(self.edata)); 
     // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.edata); 
    }; 
}; 

var viewModel = new dataModel([{ 
    name: "Jack", 
    age: "41" 
}, { 
    name: "Jill", 
    age: "33" 
}]); 

ko.applyBindings(viewModel); // you have created a variable viewModel with data, but you bound ko with a new object of type viewModel, you must either call ko with viewModel you created, or inline the creation of a new "dataModel" 

編輯：我添加了一些意見，我的變化

編輯2：我更新了jsfidd的鏈接樂來得到正確的版本;）