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>

客户也不是一个可观察的阵营（至少在你的小提琴中）：

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/

编辑

通过提供的更多信息，我已设法使其可编辑，我已从customers数组中删除了editable并使用了ViewModel中的可编辑。

当它循环遍历customers数组时，您需要使用$ 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/

knockout contentditable与数组值绑定

1 个答案: