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

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

<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