3.3 -在每个绑定中重新呈现组件

knockout.js 3.3 - rerendering component in foreach binding

本文关键字：新呈现 组件 绑定      更新时间：2023-09-26

我的viewModel由可观察数组和可观察元素组成。

// viewmodel
var viewModel = function () {
    this.o = ko.observableArray();
    for (var i = 0; i < 3; i++)
    this.o.push(ko.observable(0));
};

我需要改变这些元素的值。为此，我创建了这个组件。下面是一个简单的例子:

//custom element <component>
ko.components.register("component", {
    viewModel: function (params) {
        var self = this;
        this.value = params.value;
        console.log("init component");
        this.i = 1;
        this.change = function () {
            self.value(self.i++);
            console.log("change to " + self.value());
        }
    },
    template: "<span data-bind='text: value'></span>  <button data-bind='click:change'>Change</button>"
});

该组件可以修改params.value.

中可观察元素的值。

我的观点很简单:

<!--ko foreach:o-->
       <component params="value: $rawData"></component>
<!--/ko-->

完整示例:http://jsfiddle.net/tselofan/xg16u5cg/7/问题是，当可观察数组中可观察元素的值被改变时，组件会被再次渲染，因为它位于每个绑定的内部。您可以在日志中看到这一点。在这种情况下，我可以使用什么最佳实践?谢谢你

由于组件的上下文是该数字，因此每次数字更改时都会重新创建该组件。

http://jsfiddle.net/Crimson/xg16u5cg/8/

<!-- ko foreach: o -->
    <component params="value: $data.myNumber"></component>
<!-- /ko -->
//Test how components work in foreach binding
//custom element <component>
ko.components.register("component", {
    viewModel: function (params) {
        var self = this;
        this.value = params.value;
        console.log("init component");
        this.i = 1;
        this.change = function () {
            self.value(self.i++);
            console.log("change to " + self.value());
        }
    },
    template: "<span data-bind='text: value'></span>  <button data-bind='click:change'>Change</button>"
});

// viewmodel
var viewModel = function () {
    this.o = ko.observableArray();
    for (var i = 0; i < 3; i++)
        this.o.push({myNumber: ko.observable(0)});
};
ko.applyBindings(new viewModel());

Knockout-Repeat (https://github.com/mbest/knockout-repeat)是一个迭代绑定，它不创建新的绑定上下文，并且具有foreach模式，因此它应该像您期望的那样与组件一起工作。

相关文章：