Question

我有一个ko.computed，它接收已检查的项目并将对象添加到数组中，现在我需要能够从另一个数组中存在的ko.computed中删除项目。

所以我有一个带有餐馆列表的模态对话框，当你选择餐馆的复选框时，它会被添加到self.selectedRestaurants并且它的id被添加到self.selectedRestaurantIDs。

selectedRestaurants绑定到一个表，该表为每个已检查的餐厅生成一行。 selectedRestaurants表也有一个复选框，以便您可以选择要删除的项目。

问题是我无法弄清楚如何从selectedRestaurants中删除项目，这是一个ko.computed observable。

简化JS

self.selectedRestaurantIDs     = ko.observableArray();
    self.selectedRecommendationIDs = ko.observableArray();

     self.selectedRestaurants = ko.computed(function() {
        return ko.utils.arrayMap(self.selectedRestaurantIDs(), function(id) {
            return ko.utils.arrayFirst(ko.toJS(self.restaurants), function(item) {

                return item.id == id; //selected id will be a string
            }); 
        });
    }); 

     self.selectedRecommendations = ko.computed(function() {
        return ko.utils.arrayMap(self.selectedRecommendationIDs(), function(id) {
            return ko.utils.arrayFirst(ko.toJS(self.selectedRestaurants), function(item) {               
                return item.id == id; //selected id will be a string                
            }); 
        });
    });

HTML with bindings

<ul class="browse-restaurant-list" data-bind="foreach: $root.restaurants">
            <li>
                <div class="row">
                    <div class="col-md-1">
                        <input type="checkbox" data-bind="value: id, attr: {value: id}, checked: $root.selectedRestaurantIDs"/>
                    </div>
                    <div class="col-md-11">
                        <div class="row">
                            <div class="col-md-4">
                                <h4 data-bind="text: name"></h4>
                                <p class="restaurant-meta"><span>Type: <strong data-bind="text: foodType"></strong></span><span>Rating: <strong data-bind="text: rating"></strong></span></p>                               
                            </div>
                            <div class="col-md-3">
                                <span><strong>Hours</strong></span>

                                <p data-bind="foreach: $data.hoursOfOperation">
                                    <span class="hour-day" data-bind="text: day"></span>
                                    <span data-bind="text: open"></span>
                                    <span class="hour-open" data-bind="text: open_time"></span>
                                    <span class="hour-close" data-bind="text: close_time"></span><br/>
                                </p>                        
                            </div>
                            <div class="col-md-3">
                                <strong>Address</strong><br/>
                                <p data-bind="html: fullAddress"></p>                               
                            </div>
                            <div class="col-md-2">
                                <p><strong>Phone</strong><br/><span data-bind="text: phone"></span></p>                                                                                             
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

<tbody data-bind="foreach: $root.selectedRestaurants">
                    <tr>
                        <td><input type="checkbox" data-bind="value: id, attr: {value: id}, checked: $root.selectedRecommendationIDs"/></td>
                        <td data-bind="text: name"></td>
                        <td data-bind="text: foodType"></td>                                                
                        <td data-bind="html: fullAddress"></td>
                        <td data-bind="text: phone"></td>
                        <td data-bind="text: rating"></td>
                    </tr>                   
                </tbody>

最后我的removeSelected函数

self.removeSelected = function(item) {
        // remove all of the selected restaurant recommendations
        self.selectedRestaurants.remove(item);
     };

Answer 1

Knockout 3.0包含checkedValue绑定，这将使这更简单，更容易，因为您将能够直接拥有模型对象的可观察数组。

您的绑定将成为

<input type="checkbox" data-bind="checkedValue: $data, checked: $root.selectedRestaurants"/>

你的模型将是

self.selectedRestaurants = ko.observableArray();

您不需要计算的observable。

如果你不能使用Knockout 3.0或者你想保留ID数组，你应该只更改你的removeSelected函数以从ID数组中删除ID值：

self.removeSelected = function(item) {
    self.selectedRestaurantIDs.remove(item.id);
};

参考：http://knockoutjs.com/documentation/checked-binding.html

如何从ko.computed中删除数组项

1 个答案: