修改KnockoutJS中可编辑表的Validate Observable

本文关键字：Validate Observable 编辑 KnockoutJS 修改 | 更新日期: 2023-09-27 18:08:12

我实际上在做我的项目可编辑网格，我的数据来自JSON和解析到字典有键和值，并显示在表上。

我有一个列有3个链接，修改，验证和取消。

但是，输入标签的值，在用户编辑后，不能更新到标签标签。

 <table class="table table-hover">
                        <tbody data-bind="foreach: $root.testParams(parameters())">
                            <tr class="data-hover">
                                <td>
                                    <strong>
                                        <span id="key_params" data-bind="text:$data.key" />
                                    </strong>
                                </td>
                                <td>
                                    @*display label and input for dictionary<value>*@
                                    <input type="text" class="edit" data-bind="value:value,visible:$root.isItemEditing($data)" />
                                    <label class="read" data-bind="text:value,visible:!$root.isItemEditing($data)" />        
                                </td>
                                <td>
                                    <a href="#" class="action" data-bind="click: $root.editData.bind($root),visible:!$root.isItemEditing($data)">
                                        <i class="glyphicon glyphicon-edit"></i>&nbsp;Modify
                                    </a>
                                    <a  class="action" href="#" data-bind="click: $root.applyData.bind($root),visible:$root.isItemEditing($data)">
                                        <i class="glyphicon glyphicon-remove-circle"></i>&nbsp;Validate
                                    </a>
                                    <a class="action" href="#" data-bind="click: $root.cancelData.bind($root),visible:$root.isItemEditing($data)">
                                        <i class="glyphicon glyphicon-remove-circle"></i>&nbsp;Cancel
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                   </table>

config.js 

function ConfigurationViewModel() {
    var self = this;
    self.testParams = mapDictionaryToArray;
    self.value = ko.observable();
    self.parameters = ko.observableArray();
    self.editingItem = ko.observable();
    self.isItemEditing = function (datum) {
        return datum == self.editingItem();
    };
    self.editData = function (datu) {
        if (self.editingItem() == null) {
            self.editingItem(datu);
        }
    };
    self.applyData = function () {
        self.editingItem(null);
    };

    self.cancelData = function () {
        self.editingItem(null);
    };
};
$(document).ready(function () {
    ko.applyBindings(new RateScreenerConfigurationViewModel());
});  

bus.js
var mapDictionaryToArray =
    function (dictionary) {
        var result = [];
        dictionary = JSON.parse(dictionary);
        for (var key in dictionary) {
            if (dictionary.hasOwnProperty(key)) {
                result.push({
                    key: key,
                    value: dictionary[key]
                });
            }
        }
        return result;
    };

修改KnockoutJS中可编辑表的Validate Observable

第一个问题是value需要是一个可观察对象，这样当它在文本框中被修改时，标签也会被更新。

下一个是isEditing，它需要是一个可观察对象，这样它就可以从编辑模式切换到显示模式。

result.push({
             key: key,
             value: ko.observable(dictionary[key]),
             isEditing: ko.observable(false)
           });
<input data-bind="value:value,visible:isEditing()"  />
<label data-bind="text:value,visible:!isEditing()" />

最后一个问题是点击函数无效，甚至没有添加到模型中。

edit: function (item) {
    item.isEditing(true);
},
cancel: function (item) {
    item.isEditing(false);
}
<a href="#" data-bind="click: $root.edit">Edit</a> 
<a href="#" data-bind="">Apply</a>
<a href="#" data-bind="click: $root.cancel">Cancel</a>
http://jsfiddle.net/Wdj6X/

相关文章：