Question

  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());
});

当我动态地在array1中推送一些内容时，UI不会更新。请帮帮我。

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());
});

在自定义元素（components.register）中使用时，knockout js foreach绑定未更新

2 个答案: