KnockoutJS：为新按钮单击事件更新 DOM答案

【问题标题】：KnockoutJS: Updating DOM for new buttons click eventKnockoutJS：为新按钮单击事件更新 DOM
【发布时间】：2014-09-21 01:19:29
【问题描述】：

我有一个带有 html 绑定的按钮，我在开始时呈现它。我想这样渲染这个按钮的原因是因为我想稍后删除这个按钮（删除，而不是移除可见性）。

脚本如下：

<script type="text/javascript">
               function AppViewModel() {
                    var self = this;
                    self.addButton = ko.observable();
                    var button = "<button class='btn btn-primary btn-lg' type='button' data-bind=\"click: buttonClicked, customVal: val\"> Add button</button>";
                    self.addButton(button); 


                    self.buttonClicked = function() {
                        alert('Button clicked');
                    };
                }

                $( document ).ready(function() {
                        ko.applyBindings(new AppViewModel());          
                    });

            </script>

我的 HTML 是：

<div class="col-md-6">
              <div id="addButt" data-bind="html: addButton"></div>
</div>

现在，当我加载页面时，按钮已正确呈现，但当我单击它时，没有任何反应。它不调用 'buttonClicked' 方法。

我的理解是，这是因为应用绑定时 DOM 没有更新到这个新按钮。

有没有办法用新的 DOM 重新应用绑定？

干杯。

【问题讨论】：

有像 if 或 with 这样的绑定正在从 DOM 中删除元素......我也不明白动态渲染和后来删除之间的关系是什么...... .
我同意 nemesv，以这种方式绑定 html 并不是真正的淘汰计划。实际上没有办法刷新绑定。见：stackoverflow.com/q/8281875/1061602
非常感谢你，亚当。我认为最好使用 JQuery 来添加/删除按钮。但我不确定如何动态添加按钮并通过 JQuery 为其提供“数据绑定”属性。

标签： jquery knockout.js

【解决方案1】：

插入按钮后，您可以通过在按钮上使用 ko.cleanNode 来获得您想要执行的操作。这是一个小提琴：

http://jsfiddle.net/2aKRS/

代码稍作调整：

function AppViewModel() {
    var self = this;
    self.addButton = ko.observable("");
    self.buttonClicked = function() {
        alert('Button clicked');
    };
}

$( document ).ready(function() {
    // Initially, there is no button.
    var avm = new AppViewModel();
    ko.applyBindings(avm, $("#addButt")[0]);

    // Now, create the button and clean and reapply KO to the button itself.
    avm.addButton("<button class='btn btn-primary btn-lg' type='button' data-bind=\"click: buttonClicked\"> Add button</button>");
    ko.cleanNode($("#addButt button")[0]);
    ko.applyBindings(avm, $("#addButt button")[0]);
});

因此，基本上每次更改按钮 HTML 时，都需要清理按钮节点，然后将绑定重新应用到该节点。

【讨论】：