Question

我实际上正在为我的项目编辑可编辑的网格，我的数据来自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;

    };

Answer 1

第一个问题是需要成为一个可观察的值，以便在文本框中修改它时，标签也会更新。

接下来是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/

修改KnockoutJS中可编辑表的验证Observable

1 个答案: