Modify Validate Observable of editable table in KnockoutJS

问题

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.

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

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;

    };

回答1:

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

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/

来源：https://stackoverflow.com/questions/24180199/modify-validate-observable-of-editable-table-in-knockoutjs