使用基于 Select Checkbox 的 Knockout 更新 Viewmodel

Question

我一直在开发一个 ASP.NET MVC4 Web 应用程序，我试图在用户端保留一些选定/取消选定项目的持久数据。

基本上，我有一个 HTML 表格，我已将其转换为 Kendo Grid。表/网格已通过访问后端的 Oracle 和 SQL 服务器并将模型强输入到视图中来填充，以便通过该模型创建和填充表。我正在尝试根据是否选中复选框来更新在我的 ViewModel 中找到的 ObservableArray，但我已经旋转了很长一段时间。以下是我实施的基本框架。任何帮助将不胜感激。

HTML 表格：

    <table id="grid" border="1">
     <thead id="tableHead">
            <tr align="center">
                <th data-field="select" id="selectChkBox"> Select</th>
                <th data-field="model">Model</th>
                <th data-field="division">Division</th>
            </tr>
        </thead>
        <tbody id="tableBody" class="hoverTable">
            @foreach (var config in Model.Models)
            {
                <tr align="right" id="entries">
                    <td><input type="checkbox" class="chkBox" data-bind="checked: addModel" id="checkbox" value="@config.ModelName"/></td>
                    <td>@config.ModelName</td>
                    <td>@config.Division</td>
                </tr>
            }
        </tbody>
    </table>

JavaScript/Knockout ViewModel：

function PRPSSelectViewModel() {
    // Data
    var self = this;
    self.AvailableModels = ko.observableArray([]);
    self.ModelNames = ko.observableArray([]);

    // Operations
    self.addModel = function (name) {
        self.ModelNames.push(name);
    };

    self.removeModel = function (name) {
        self.ModelNames.remove(name);
    };
}

我确信已经记录了这个问题的许多变体，但是我对 Knockout 非常陌生，尽管提供了大量可用的资源和示例，但我无法实现我想要的功能。

编辑 用一个简单的方法解决。我刚刚在我的 Javascript 文件中实例化了一个数组，我用它来填充模型的名称。当一个复选框被标记为在剑道网格上“选择”它时，我已经有一些 Javascript 设置要触发，并且只需抓住适当的行，我就可以用模型名称填充数组。只要页面不刷新（也不应该刷新，因为我正在通过 CRUD 操作使用模态和部分视图），我应该没问题。

Answer 1

见documentation:

对于复选框，KO会设置参数值为true时选中元素，为false时不选中。 如果您给出的值实际上不是布尔值，它将被松散地解释。这意味着非零数字和非空对象和非空字符串都将被解释为真，而零、空、未定义和空字符串将被解释为假。

我已经强调了您遇到的问题 - 您使用的是函数而不是可观察的。在您的视图模型中添加属性：

self.isChecked = ko.observable(false);
self.isChecked.subscribe(function(newValue) {
   if (newValue == true) 
       self.addModel(<observable with model name>);
   else
       self.removeModel(<observable with model name>);
});

您应该将当前的 ModelName 保存在视图模型中的某个位置。

并在您的标记中进行此更改：

....
<td><input type="checkbox" class="chkBox" data-bind="checked: isChecked" id="checkbox" value="@config.ModelName"/></td>
....

Answer 2

我最近实现了类似的行为，我的工作代码仅与以下代码 js 视图模型非常相似。请参阅此小提琴以获取完整的工作示例。 http://jsfiddle.net/sbirthare/KR4a6/19/

看看这是否有帮助。

var 初始数据 = [ { 可用项目：[ {标题：“美国”，isSelected：真}， {标题：“加拿大”，isSelected：假}， {标题：“印度”，isSelected：假}] }, { 选定项目：[ {“标题”：“美国”}， {“标题”：“加拿大”} ] } ];

function Item(titleText, isSelected) { this.title = ko.observable(titleText); this.isSelected = ko.observable(isSelected); }

var SelectableItemViewModel = 功能（项目）{ // 数据 变种自我=这个； self.filter = ko.observable(""); self.availableItems = ko.observableArray(ko.utils.arrayMap(items[0].availableItems, function (item) { 返回新项目（item.title，item.isSelected）； }));

self.selectedItems = ko.observableArray(ko.utils.arrayMap(items[1].selectedItems, function (item) {
    return ko.utils.arrayFirst(self.availableItems(), function (itm){
        return item.title == itm.title();
    });

}));

    //filter the items using the filter text
self.filteredItems = ko.dependentObservable(function () {
    debugger;
    var filter = this.filter().toLowerCase();
    if (!filter) {
        return this.availableItems();
    } else {
        return ko.utils.arrayFilter(this.availableItems(), function (item) {
            return ko.utils.stringStartsWith(item.title().toLowerCase(), filter);
        });
    }
}, self);

// Operations

self.removeItem = function (removedItem) {
    self.selectedItems.remove(removedItem);
};}

var vm = new SelectableItemViewModel(initialData);

$(document).ready(function () { ko.applyBindings(vm); });