2

我完成了装订，效果很好。现在我试图通过 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());

提前感谢！

4

3 回答 3

7

关于您尝试做什么，我制作了一个 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]);
});
于 2013-10-07T02:52:32.713 回答
0

'很抱歉成为坏消息的承担者，但你现在正在使用 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="" 属性而不是您自己的东西。您也可以使用无容器绑定，但在文档中查找如何做到这一点。

于 2013-10-07T02:10:14.930 回答
0

做ko.applyBindingsToNode你的新元素

于 2013-10-07T07:51:49.890 回答