Question

我有一个带有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的绑定？

干杯。

Answer 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时，都需要清理按钮节点，然后重新应用绑定到该节点。

KnockoutJS：为新按钮点击事件更新DOM

1 个答案: