Question

在我看来，我可以选择添加用户，每个user都是一个包含几个字段的div：

<div>
    <input data-bind="value: name" />
    <input data-bind="value: position" />
    <input data-bind="value: email" /></div>
    <button data-bind="click: function(){ $root.addUser()}">SAVE</button>
</div>

点击按钮即可添加此div，并且在加载页面时不存在。

当我尝试通过单击“保存”按钮保存新用户时，它不起作用，没有任何反应，只是忽略了我的点击。

所以我的问题是 - 如何使淘汰data-bind能够动态生成元素？

我在线阅读了一些帖子，但无法找到解决方案，我们将不胜感激。

Users.js脚本：

var User = function (data) {
    this.name= ko.observable(data.name);
    this.position= ko.observable(data.position);
    this.email= ko.observable(data.email);
}
self.users = ko.observableArray([]);
self.addUser= function () {
  console.log("test");   
}

这是添加div的代码：Users.ui.js：

$('body').on('click', '.add', function () {
        var strClientSecHtml = "<div class=\"sec\"><div class=\"secIn\">\n...
        $(strClientSecHtml).insertBefore($(this).closest('.sec'));
        showPrimaryLbl();
})

Answer 1

如果您创建动态内容，则可以对动态内容应用一组新的绑定。

$('body').on('click', '.add', function () {
        var strClientSecElem = $('<div class=\"sec\"><div class=\"secIn\">\n...');
        $(this).closest('.sec').before(strClientSecElem);
        ko.applyBindings(new User({}), strClientSecElem.get(0)); //get the native element from jQelement
        showPrimaryLbl();
})

话虽如此，通过淘汰赛，您通常会想要修改 javascript 对象，并将DOM修改保留到库中，而不是动态插入html。您可以将新的User对象推送到users数组，foreach:users绑定将负责在DOM中创建新元素。

Answer 2

正如杰森如此雄辩地提到的那样，你不会/通常不应该通过淘汰来做到这一点。以下是优化的＆＃34; knockout-y＆＃34;你的代码版本。 jQuery代码已转换为自定义绑定，每次添加元素时都会运行该绑定。

HTML：

<!-- ko template: { name: 'user-tmpl', foreach: users } -->
<!- /ko -->

<script type="text/html" id="user-tmpl">
    <div data-bind="userDivOnLoad">
        <input data-bind="value: name" />
        <input data-bind="value: position" />
        <input data-bind="value: email" /></div>
        <button data-bind="click: $parent.addUser()">SAVE</button>
    </div>
</script>

JavaScript模型：

var User = function (data) {
    var self = this;

    self.name = ko.observable();
    self.position = ko.observable();
    self.email = ko.observable();

    if(data)
    {
        self.name(data.name);
        self.position(data.position);
        self.email(data.email);
    }    
}

var AppModel = function(){
    var self = this;

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

    self.addUser= function () {
      console.log("DSA");

      self.users.push(new User());
    }

    //hydrate
    (function(){
        self.users.push(new User());
    }();
};

自定义绑定：

ko.bindingHandlers.userDivOnLoad = {
    init: function(element) {
        showPrimaryLbl();
    }
};

我的建议是从绑定处理程序中删除DOM操作，并确定一个逻辑构造，您可以在其中在knockout模型中应用它。

页面加载后动态添加新div

2 个答案: