0

これまでのところ、この問題の解決策を見つけることができませんでした。メイン リストで数量ボックスが変更されたときに、集計テーブルを作成しようとしています。現在の私のコードは次のとおりです。

<div class="mainItems">
            <ul data-bind="foreach: finalListItems">
                <li> <input class="qty" data-bind="value: qty, valueUpdate: 'afterkeydown'" size="4"/><label data-bind="text: item" ></label></li>
            </ul>
        </div>

        <div>
            <table>
                <thead>
                    <tr>
                        <th>Item</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: finalListItems">
                    <tr>
                        <td data-bind="text: item"></td>
                        <td data-bind="text: qty"></td>
                    </tr>
                </tbody>
            </table>
        </div>

そしてViewBox：

function sortedListItem(qty, listItemName) {
var self = this;
self.qty = ko.observable(qty);
self.item = listItemName;
}   
var trialViewModel = function(){
var self = this;
self.availableListItems = [
    {itemName: "Here is Item 1"},
    {itemName: "Here is Item 2"},
    {itemName: "Here is Item 3"},
    {itemName: "Here is Item 4"},
    {itemName: "Here is Item 5"}        
];
self.finalListItems = ko.observableArray([
    new sortedListItem(ko.observable.qty, self.availableListItems[0].itemName),
    new sortedListItem(ko.observable.qty, self.availableListItems[1].itemName),
    new sortedListItem(ko.observable.qty, self.availableListItems[2].itemName),
    new sortedListItem(ko.observable.qty, self.availableListItems[3].itemName),
    new sortedListItem(ko.observable.qty, self.availableListItems[4].itemName)
]);
};
ko.applyBindings(trialViewModel());

ここには JSFiddle も含まれているので、私が何をしようとしているのかがわかります。

http://jsfiddle.net/RYmf7/

問題は、数量ボックスが変更された場合にのみ、概要にアイテムを表示することです。可視性バインディングを配列内の個々の項目に結び付けることができず、このようなものはまだ見たことがありません。助言がありますか？

4

2 に答える 2

0

これを行うにはいくつかの方法がありますが、パスを開始するための最新のフィドルを次に示します: http://jsfiddle.net/RYmf7/1/

アイデアは、isVisible個々のアイテムごとにモデルにプロパティを追加し、それを目に見えるデータ バインディングに使用することです。

//model for the sortedListItem
function sortedListItem(qty, listItemName) {
    var self = this;
    self.qty = ko.observable(qty);
    self.item = listItemName;
    self.isVisible = ko.computed(function(){
        return self.qty() !== 0;
    });
}
于 2013-08-22T15:24:52.910 に答える
0

値が変更されたときに、各アイテムにダーティのフラグを立てることができます。集計リストは、新しい数量を持つアイテムに基づいて作成されます。

http://jsfiddle.net/RYmf7/2/

function sortedListItem(qty, listItemName) {
    var self = this;
    self.originalqty = qty;
    self.qty = ko.observable(qty);
    self.item = listItemName;

    self.isDirty = ko.computed(function() {
        return self.originalqty != self.qty();
    }, this);
}

var trialViewModel = function(){
    var self = this;

    self.availableListItems = [
        {itemName: "Here is Item 1"},
        {itemName: "Here is Item 2"},
        {itemName: "Here is Item 3"},
        {itemName: "Here is Item 4"},
        {itemName: "Here is Item 5"}        
    ];

    self.finalListItems = ko.observableArray([
        new sortedListItem(ko.observable.qty, self.availableListItems[0].itemName),
        new sortedListItem(ko.observable.qty, self.availableListItems[1].itemName),
        new sortedListItem(ko.observable.qty, self.availableListItems[2].itemName),
        new sortedListItem(ko.observable.qty, self.availableListItems[3].itemName),
        new sortedListItem(ko.observable.qty, self.availableListItems[4].itemName)
    ]);

    self.summaryListItems = ko.computed(function() {
        var summaryItems = [];

        ko.utils.arrayForEach(self.finalListItems(), function(item) {
            if (item.isDirty()) {
                summaryItems.push(item);
            }
        });
        return summaryItems;
    });

};

ko.applyBindings(trialViewModel());
于 2013-08-22T15:39:46.087 に答える