基于选中复选框的淘汰更新视图模型

本文关键字：更新 新视图 模型 淘汰 于选中 复选框 | 更新日期: 2023-09-27 18:17:44

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

基本上，我有一个HTML表，我已经转换成一个剑道网格。通过访问后端Oracle和SQL服务器，并向视图强类型输入一个模型，以便通过该模型创建和填充表，从而填充表/网格。我试图更新一个ObservableArray在我的ViewModel基于选择复选框是否已被选中，但我已经旋转圈了相当一段时间。下面是我所实现的一个基本框架。如有任何帮助，我将不胜感激。

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/淘汰赛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操作)，我应该是好的。

基于选中复选框的淘汰更新视图模型

参见文档:

对于复选框，KO将设置当参数值为true时选中元素，当参数值为false时不选中元素。如果您给出的值实际上不是布尔值，它将被松散地解释。这意味着非零数字、非空对象和非空字符串都将被解释为true，而0、null、undefined和空字符串将被解释为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>
....

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

看看是否有帮助。

var initialData = [｛availableItems:({title: "US"， isSelected: true}，{title: "Canada"， isSelected: false}，{title:"印度"，isSelected: false}]}，｛设置selecteditem:({"title": "US"}，{"title": "Canada"}］}

);

function Item(titleText, isSelected) {这一点。title = ko.observable(titleText);这一点。isSelected = ko.observable(isSelected);}

var SelectableItemViewModel = function (items) {//数据Var self = this;自我。Filter = ko.observable(");自我。availableItems = ko.observableArray(ko.utils.arrayMap(items[0].))availableItems, function (item) {return new Item(Item .)标题、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);

美元(文档)。Ready (function () {ko.applyBindings (vm);});

相关文章：