8

編集: 問題はバインディングではなく、単純な JavaScript のミスに関連していました。

foreach バインディング内のクリック バインディングに関する質問があります。マスターデータから値を選択するためのドロップダウンボックスを表示するアイテムのリストがあります。そのリストからアイテムを追加および削除できます。項目を削除するボタンは foreach バインディングにネストされています。したがって、 $parent> でバインドする必要があると予想しました

<button data-bind="click: $parent.removeNumber">-</button>

それはうまくいきません。ただし、次のバージョンは機能します。

<button data-bind="click: removeNumber">-</button>

私はなぜなのか理解していない。

コード：

<h2>numbers:</h2>
 <ul data-bind="foreach: numbers">
     <li>
       <select data-bind="value: id, 
                          options: masterData, 
                          optionsText: 'caption', 
                          optionsValue: 'id'"></select>
        <br />
        value: <span data-bind="text: id"></span>
        <br />
        <button data-bind="click: $parent.removeNumber">-</button>      
    </li>
</ul>
<button data-bind="click: addNumber">+</button>

</p> 

function ViewModel() {
    self.masterData = [{ id: 1, caption: "One"},
                       { id: 2, caption: "Two"}];

   self.numbers = ko.observableArray([{
        id: ko.observable(2)}]);

    self.addNumber = function() {
        self.numbers.push({
            id: ko.observable(2)
        });
    };


    self.removeNumber = function(item) {
        self.numbers.destroy(item);
        console.log("removed" + item);
    };
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);​

フィドルを作成しました（動作しないバージョンで）： http://jsfiddle.net/delixfe/NWWH8/

ご協力いただきありがとうございます。

4

1 に答える 1

11

あなたはちょっと私を持っていました！

あなたは正しいです、$parent必要なはずです。あなたの間違いは、ビューモデルで定義selfしていませんでした。それを行った後$parent、removeButton とmasterDataバインディングで必要でした。

ここに実用的なフィドルがあります：http://jsfiddle.net/FpSWb/

于 2012-06-05T20:24:00.693 に答える