KnockoutJS将绑定应用于从Ajax返回的表单

Question

>我有一个按钮，在 ajax 之后应用于 DOM。

<input type="submit" data-bind="click: save" />

save调用不是从没有我的 ViewModel 的情况下触发的，大概 Knockout 不知道 DOM 中的这个新绑定。

 var Model = function()
 {
      this.save = function(data, event)
      {
           alert("test");
      }
 }

如何重新应用绑定，以便选取此新 HTML 并使save绑定正常工作？

Answer 1

加载新内容后，可以使用ko.applyBindings(model, targetElement)将绑定应用于包含 save 方法的模型部分：

例：

var vm = {
    load: function() {
        // insert new content
        document.getElementById('container').innerHTML = 
        '<input id="btLoad" 
                type="button" value="save" 
                data-bind="click: save" />';
        
        // apply bindings to new elements
        ko.applyBindings(vm, document.getElementById('btLoad'));
    },
    save: function() {
        alert('saved');
    }
};
ko.applyBindings(vm);

<script 
 src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js">
</script>
<input type="button" value="load" data-bind="click: load"/>
<div id="container">
</div>

Answer 2

另一种，也许更"敲门"的方法是让按钮一直存在，但使用绑定来控制按钮的可见性。

例如

<input type="submit" data-bind="click: save, visible: anObservableValue" />

其中 anObservableValue 是一个 ko.observable（false）您设置为 true
anObservableValue（true）当你完成了你提到的初始 ajax 调用时。

或者，如果在进行 ajax 调用之前按钮实际上不存在于 dom 中很重要，请使用 KNOCKOUT 如果绑定环绕在按钮周围

<!-- ko if: anObervableValue -->
    <input type="submit" data-bind="click: save" />
<!-- /ko -->

这样，按钮只会在您希望时才出现在 DOM 中，但 KNOCKOUT 将处理绑定并从一开始就知道您的保存方法。

这将避免所有繁琐的多次绑定，我个人只在绝对必须这样做的时候才会这样做