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>

和视图框：

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/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 回答
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 回答