4

このトピックが何度か取り上げられていることは知っていますが、ここで少し問題があります。私は次のように考えています。

    <!-- ko foreach: documents -->
    <div>
        <input type="checkbox" data-bind="checked: $parent.checkItem(documentId)" />
    </div>
    <!-- /ko -->

私のviewModelでは：

var checkItem = function (checkedItem) {
    debugger;
    window.selectedDocuments.push(checkedItem);
};

別のリソースがこの配列にアクセスする必要があるため、ウィンドウを使用しています。

現在、ページをロードすると、ドキュメントごとに checkItem が 1 回ヒットしますが、これはすべきではないと思います。どのドキュメントが選択されているかを監視し、配列を更新したままにしています (この場合は selectedDocuments)。

これが私の試みのフィドルです：

http://jsfiddle.net/PTSkR/36/

どうすればこれを機能させることができますか？

4

2 に答える 2

5

checked監視可能な配列でデータバインディングを使用するだけでよいと思います。アイテムをチェックすると、Knockout は監視可能な配列を自動的に更新します。

また、各チェックボックスの をvalueにバインドするバインディングを追加したことにも注意してください。valuedocumentId

意見： 

<!-- ko foreach: documents -->
    <div>
        <input type="checkbox" data-bind="checked: $parent.selectedDocuments, value: documentId" />
    </div>
<!-- /ko -->

<!-- ko foreach: selectedDocuments -->
        <div>
            <span data-bind="text: $data"></span>
        </div>
<!-- /ko -->

ビューモデル:

var selectedDocuments = ko.observableArray();

var viewModel = {
    documents: [{"documentId": "1"}, {"documentId": "2"}, {"documentId": "3"}],
    selectedDocuments: selectedDocuments
};
ko.applyBindings(viewModel);

例: http://jsfiddle.net/PTSkR/37/

window余談ですが、可能であればプロパティを添付することは避けたいと思います。軽量の名前空間パターンを使用するか、単純な pub/sub システムを KnockoutJS で使用できます。

于 2013-04-30T03:12:44.193 に答える
0

checkedバインディングをobservableまたはobservableArrayのいずれかにバインドする必要があります。配列に対してバインドされている場合、配列からの入力checkedの追加と削除によるバインドvalue。

したがって、あなたの場合、入力valueを documentId に対して配列に対してバインドできます。これにより、ID の配列が得られます。次に、計算済みを使用して、それらの ID で表されるドキュメントの配列を作成できます。

var viewModel = {
    documents: [{"documentId": "2"}, {"documentId": "3"}, {"documentId": "1"}],
    selectedDocumentIds: ko.observableArray()
};

//quick index to make lookup require less looping
viewModel.documentIndex = {};
ko.utils.arrayForEach(viewModel.documents, function(doc) {
   viewModel.documentIndex[doc.documentId] = doc; 
});

//computed to represent an array of the actual objects
viewModel.selectedDocuments = ko.computed(function() {
    return ko.utils.arrayMap(viewModel.selectedDocumentIds(), function(id) {
        return viewModel.documentIndex[id];
    });
});

サンプルはこちら: http://jsfiddle.net/rniemeyer/DCZKz/

于 2013-04-30T03:15:48.403 に答える