0

まず、ノックアウトの使用は初めてです。

array1 をテンプレートにバインドしましたが、array2 を使用するように変更したいのですが、これはノックアウトで可能ですか?

いじっていたこと

  var viewModel = function(){
    var _this = this;
    this.test = [{ name: 'Fruit4'}, {name: 'Vegetables'}];
    this.categories = ko.observableArray(this.test);
    this.changeItems = function()
    {
       this.test= [{ name: 'Fruit2'}, {name: 'Vegetables2'}];
       categories = ko.observableArray(this.test);     
    }
  };

  ko.applyBindings(viewModel());
4

1 に答える 1

2

条件に基づいて2つの配列のいずれかを返し、それにバインドする計算されたオブザーバブルを作成します。適切に更新されるように、どちらを選択するかを決定する条件も観察可能であることを確認してください。

function ViewModel(data) {
    this.array1 = ko.observableArray(data.array1);
    this.array2 = ko.observableArray(data.array2);

    // change this value to true to use array2
    this.chooseArray2 = ko.observable(false);

    this.array = ko.computed(function () {
        return this.chooseArray2()
            ? this.array2()
            : this.array1();
    }, this);
}

<div data-bind="foreach: array">
    ...
</div>

もちろん、ロジックはそれよりも複雑になる可能性があります。より管理しやすくするために、条件をオブザーバブルにも計算し、そこにロジックを作成します。配列を返す計算されたオブザーバブルは、あまり変更する必要はありません。

function ViewModel(data) {
    this.array1 = ko.observableArray(data.array1);
    this.array2 = ko.observableArray(data.array2);

    // which to choose depends on a number of conditions
    this.someCondition = ko.observable(false);
    this.anotherCondition = ko.observable(true);
    this.someNumber = ko.observable(132);
    this.chooseArray2 = ko.computed(function () {
        // some complex logic
        if (this.someNumber() < 0) {
            return this.someCondition();
        }
        return this.someCondition() || !this.anotherCondition();
    }, this);

    this.array = ko.computed(function () {
        return this.chooseArray2()
            ? this.array2()
            : this.array1();
    }, this);
}
于 2013-01-13T08:52:24.547 に答える