用数组值淘汰 contentditable 绑定

Question

我正在尝试创建自定义绑定，以在 this link 示例之后的表格上使用 HTML5 编辑内容，但我无法使用 observableArray()。

表格正在视图中显示，foreach data-bindig 如下所示：

        <tbody data-bind="foreach: customers">
            <tr data-bind="attr: {id: $index}">
                <td style="text-align: center;">
                    <span class="label label-primary" data-bind="html: Id"></span>
                </td>
                <td data-bind="html: Name, attr: {id: 'Nome'}, contentEditable: true"></td>
            </tr>
        </tbody>

视图模型是这样的：

函数 ViewModel() {

        var self = this;

        self.data = '@jsonList';
        self.customers = ko.observableArray(JSON.parse(self.data));
        self.editable = ko.observable(false);

        for (i = 0; i < self.customers().length; i++) {

            self.customers()[i]['Details'] = '/Anagrafica/Details/' + self.customers()[i]['Id'];

            self.customers()[i]['Delete'] = '/Anagrafica/Delete/' + self.customers()[i]['Id'];

        };

        ko.bindingHandlers.htmlEdit= {

            update: function (element, valueAccessor) {
                var value = ko.unwrap(valueAccessor());
            }
        };

        ko.bindingHandlers.contentEditable = {

            init: function (element, valueAccessor, allBindingsAccessor) {
                var value = ko.unwrap(valueAccessor()),
                    htmlEdit= allBindingsAccessor().htmlEdit;

                $(element).on("input", function () {
                    if (ko.isWriteableObservable(htmlEdit)) {
                        htmlEdit(this.innerHTML);
                    }
                });
            },

            update: function (element, valueAccessor) {
                var value = ko.unwrap(valueAccessor());
                element.contentEditable = value;
                $(element).trigger("input");
            }

        };
    };


    var viewModel = new ViewModel();

    ko.applyBindings(viewModel);

目前我对代码本身感到困惑，因为我不明白如何将其设置为指向数组上的元素。

注意：数组已填充，显示内容没有问题。

编辑：在这里我添加了 JSFiddle https://jsfiddle.net/wxn34p45/ 以便更好地阅读代码

Answer 1

您的姓名似乎是拼写错误，而不是姓名：

<td data-bind="html: name, attr: {id: 'Nome'}, contentEditable: true"></td> 

customers 也不是 observableArray（至少在你的小提琴中）：

self.customers = ko.observableArray([{"Id":1111,"name":" [Malena]"},{"Id":2222,"name":" [Maria]"},{"Id":3333,"name":" [Merio]"},{"Id":4444,"name":" [Milena]"}]);

我已经更新了小提琴（也让它通过淘汰赛运行，并且我已经显示了 ViewModel 的副本以帮助调试），内容现在可以编辑了。

<h4>View Model</h4>
  <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

这现在是否产生了预期的效果？

https://jsfiddle.net/asindlemouat/wxn34p45/1/

编辑

根据提供的进一步信息，我已设法使其可编辑，我已从客户数组中删除可编辑并使用 ViewModel 中的那个。

当它循环遍历客户数组时，您需要使用 $parent.editable 在 ViewModel 中调用可编辑的 observable。

<tbody data-bind="foreach: customers">
  <tr data-bind="attr: {id: $index}">
    <td style="text-align: center;">
      <span class="label label-primary" data-bind="html: Id"></span>
    </td>
    <td data-bind="html: name, attr: {id: 'Nome'}, contentEditable: $parent.editable"></td>
    <td></td>
  </tr>
</tbody>

更新小提琴：https://jsfiddle.net/asindlemouat/wxn34p45/8/