修改KnockoutJS中可编辑表的Validate Observable [英] Modify Validate Observable of editable table in KnockoutJS

问题描述

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

I'm actually doing my project the editable grid, my data comes from the JSON and parsed to dictionary to have key and value and display on the table.

我还有一栏包含3个链接，即修改"，验证"和取消".

I have one more column to have 3 links, Modify, Validate and Cancel.

但是，输入标签的值在用户编辑后无法更新为标签标签.

However, the value from input tag, after editing by user, cannot be updated to the label tag.

 <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

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;

    };

推荐答案

第一个问题是值必须是可观察的，以便在文本框中对其进行修改时，标签也会被更新.

The first problem was value needed to be an observable so that when it was modified in the textbox, the label is also updated.

接下来是isEditing必须是可观察的，以便可以从编辑模式切换到显示模式.

The next is isEditing needed to be an observable so that it can be switched from edit mode to display mode.

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()" />

最后一个问题是点击功能无效，甚至没有添加到模型中.

The last problem was the click functions were invalid and not even added to the model.

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/

这篇关于修改KnockoutJS中可编辑表的Validate Observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！