在页面加载后动态添加新的 div

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

正如Jason如此雄辩地提到的那样，你通常不会/不应该在淘汰赛中这样做。下面是代码的优化"淘汰"版本。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 操作，并确定一个逻辑结构，您可以在其中将其应用于挖空模型。