KnockoutJs - 数据绑定不适用于新元素

Question

我已经完成了绑定，效果很好。现在我试图通过 jquery 创建一个元素。我的问题是当我使用带有数据绑定的 jquery 创建一个新元素时，它不会与淘汰赛交互。请帮助我:(我认为这应该重新绑定.....

当我单击 jquery 创建的添加按钮时，它不起作用:(

这是我的代码： HTML

User List:<br>
<table>
    <thead><tr>
    <th>name</th><th>action</th>
</tr></thead>
<tbody class="user-list">
    <tr>
        <td>anthony</td>
        <td><input type="button" data-bind="click: addUser" value="add"/></td>
    </tr>    
</tbody>
</table>

<input type="button" class="btnAdd"  value="add User"/>
User to Block:<br>
<table>
        <thead><tr>
        <th>Username</th>
     </tr></thead>
    <tbody data-bind="foreach: users">
        <tr>
            <td><input data-bind="value: name" /></td>     
       </tr>    
   </tbody>
</table>

我的 Js：

$(".btnAdd").bind('click',function(){
$('.user-list').append('<tr><td>joey</td> <td><input type="button" data-bind="click: addUser" value="Add"/></td></tr> ');});

function UserList(name) {
    var self = this;
    self.name = name;  
}

function UserViewModel() {
    var self = this;

    self.users = ko.observableArray();

    self.addUser = function() {
    self.users.push(new UserList("it works"));
}

}
ko.applyBindings(new UserViewModel());

提前致谢！

Answer 1

关于你想做什么，我做了一个 jsfiddle 来告诉你如何做：

http://jsfiddle.net/Maw8K/4/

我想向你解释那一行：

ko.applyBindings(new UserViewModel());

通过编写该行，您要求敲除应用绑定，您可以在每次添加新的 DOM 元素时回调它，但它会失败，因为它会尝试重新应用一些现有的绑定。

由于最后一件事，您必须将 DOM 作为第二个参数传递，以界定需要分析和应用绑定的 DOM。

您的问题的另一部分是您的模型。当你写你的模型时，你必须分享它；否则您的列表对于每个绑定都是唯一的。

为此，您可以这样做：

function UserList(name) {
    var self = this;
    self.name = name;  
}

function UserViewModel() {
    var self = this;

    self.users = ko.observableArray();

    self.addUser = function() {
    self.users.push(new UserList("it works"));
}

}

//We are sharing the model to get a common list
var userViewModel = new UserViewModel();
//We inform knockout to apply the bindings
ko.applyBindings(userViewModel);

//On click on btnAdd
$(".btnAdd").bind('click',function(){
  //We define the new element
  var newElement = $('<tr><td>joey</td> <td><input type="button" data-bind="click: addUser" value="Add"/></td></tr>');
  //We append it
  $('.user-list').append(newElement);
  //We inform knockout to apply the binding only on the new element
  //The second param must be DOM and not JQuery so that why you have to use [0]
  ko.applyBindings(userViewModel, newElement[0]);
});

Answer 2

'很抱歉成为坏消息的承担者，但您现在正在使用 Knockout.js，而 jQuery 应该是您过去记得的东西，但仅在需要时才使用。忘记那种 DOM 操作，期待双向数据绑定。

视图模型上的 addUser 方法永远不会被调用，因为您没有绑定到它。查看 Knockout 教程以更好地了解如何使用它们。

<input type="button" class="btnAdd" data-bind="click: addUser"/>

self.addUser = function() {
    alert('OMGooses!');
    self.users.push(new UserList("it works"));
};

每当您尝试使用绑定处理程序时，请使用 data-bind="" 属性而不是您自己的东西。您也可以使用无容器绑定，但请查看文档中的操作方法。

Answer 3

在你的新元素上执行ko.applyBindingsToNode