1

次の形式のノックアウト可観測配列があります。

this.controls = ko.observableArray([
        { 
            name: 'Previous',
            action: '$root.previous'
        },
        { 
            name: 'Next'          ,     
            action: '$root.next'
        },
        { 
            name: 'Save',
            action: '$root.save'
        }
]);

私は私の見解で次のことをしたいと思います：

<div class="controls navigation">
    <ul data-bind="foreach: $root.controls">
        <li>
            <span data-bind="text: name, click: action"></span>
        </li>
    </ul>
</div>

ビューは、本質的にボタンである 3 つの別個のスパンを作成します。私の目標は、ユーザーが特定のスパンをクリックするたびに、ビューモデルに対応するアクションが呼び出されるようにすることです。

ただし、これは機能しません。

配列をループして、アイテムごとに異なるクリック バインディング アクションを指定するにはどうすればよいですか?

各スパンを個別に簡単に書き出すことができます (この特定のケースでは、配列に項目が 3 つしかないため) が、配列を使用してこれをどのように達成できるか興味があります。

4

2 に答える 2

3

あなたはとても近くにいます。前、次、および保存が次のように定義されていると仮定します

this.previous = function() { ... };

そして、あなたがこのように自己を定義すると仮定します

self = this;

次に、次のように配列を更新するだけです。

this.controls = ko.observableArray([
    { 
        name: 'Previous',
        action: self.previous
    },
    { 
        name: 'Next',     
        action: self.next
    },
    { 
        name: 'Save',
        action: self.save
    }
]);

action が文字列ではなく、関数への参照になっていることに注意してください。

http://jsfiddle.net/tlarson/Dwwft/

于 2013-04-19T19:52:47.683 に答える
0

おそらく、これを次のようにリファクタリングできます

this.controls = ko.observableArray([
        { 
            name: 'Previous'
        },
        { 
            name: 'Next'     
        },
        { 
            name: 'Save'
        }
]);
this.myAction = function (value, event) {
    if(value == 'Previous')
    {
       // do stuff
    }
    else if(value == 'Next')
    {
       // do stuff
    }
    else if(value == 'Save')
    {
       // do stuff
    }
    return true;
}

それから

<div class="controls navigation">
    <ul data-bind="foreach: $root.controls">
        <li>
            <span data-bind="text: name, click: myAction"></span>
        </li>
    </ul>
</div>
于 2013-04-19T19:35:43.990 に答える