3

私の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/ 問題は、オブザーバブル配列のオブザーバブル要素の値が変更されたときに、コンポーネントが foreach バインディング内にあるため、再度レンダリングされることです。これはログで確認できます。この状況で使用できるベスト プラクティスは何ですか? ありがとうございました

4

2 に答える 2

1

コンポーネントのコンテキストは数値であるため、数値が変更されるたびにコンポーネントが再作成されます。

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());
于 2015-07-16T13:44:07.427 に答える