敲除JS的foreach结合在定制元素使用时，不更新（components.register）(kn

  ko.components.register("toast-container", {
    viewModel: ToastViewModel,
    template: '<div data-bind="foreach: array1"><div data-bind="text:someText"> </div></div>'
});

function ToastViewModel(params) {
    var self = this;
    self.array1 = ko.observableArray();
    self.Onclick = function () {
        self.array1.push({ someText: "some content" });
    }
}
$(function () {
    ko.applyBindings(new ToastViewModel());
});

当我在阵列1动态推一些内容，用户界面没有更新。 请帮我。

Answer 1:

检查：

 ko.components.register("toast-container", { viewModel: ToastViewModel, template: '<div class="array" data-bind="foreach: array1"><div data-bind="text:someText"> </div> </div> <button data-bind="click: Onclick">Click me</button> ' }); function ToastViewModel(params) { var self = this; self.array1 = ko.observableArray(); self.Onclick = function () { //alert("click!"); self.array1.push({ someText: "some content" }); } } $(function () { ko.applyBindings({}, $("#host")[0]); }); 

 #host { width: 300px; height: 300px; border: 1px solid red; } .array { border: 1px solid green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="host"> <div data-bind="component: { name: 'toast-container'}"></div> </div> 

注意：内部组件创建的模型，因此您不必创建于applyBindings函数调用一个新的。

更新1：按钮组件之外，组件模型已经分裂。

 ko.components.register("toast-container", { viewModel: ToastContainerViewModel, template: '<div class="array" data-bind="foreach: array"><div data-bind="text:someText"> </div> </div> ' }); function ToastContainerViewModel(params) { self.array = params.array; } function ToastViewModel(params) { var self = this; self.array1 = ko.observableArray(); self.Onclick = function () { //alert("click!"); self.array1.push({ someText: "some content" }); } } $(function () { ko.applyBindings(new ToastViewModel(), $("#host")[0]); }); 

 #host { width: 300px; height: 300px; border: 1px solid red; } .array { border: 1px solid green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="host"> <button data-bind="click: Onclick">Click me</button> <toast-container params="array: array1"></toast-container> </div> 

Answer 2:

它看起来像的onclick永远不会获取调用。 看看这个小提琴： http://jsfiddle.net/jonr22/w36yuLvr/ 。

所有我所做的就是绑定你的onclick事件，这样它实际上被调用，并且我添加了一个默认项阵列，以便它可以被点击，这样的：

ko.components.register("toast-container", {
    viewModel: ToastViewModel,
     template: '<div data-bind="click: Onclick, foreach: array1"><div data-bind="text:someText"></div></div>'
});

function ToastViewModel(params) {
    var self = this;
    self.array1 = ko.observableArray([{someText: 'foo'}]);
    self.Onclick = function () {
        self.array1.push({ someText: "some content" });
    }
}
$(function () {
    ko.applyBindings(new ToastViewModel());
});

文章来源: knockout js foreach binding is not updating when used in custom element (components.register)