1

我正在创建一个自定义绑定，它将显示一个锚点，单击该锚点会变成一个文本框。一旦用户输入一个值并按下回车键，该值将被推送到传递给绑定的 observableArray 中。

大部分绑定取自 Ryan Niemeyers 示例 - 可在此处找到

html

<div data-bind="clickToEdit: { data: items, buttonText: 'New Item' }"></div>

捆绑

ko.bindingHandlers.clickToEdit = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var options = valueAccessor() || {};

        var editing = ko.observable(false);
        var newValue = ko.observable();

        var button = $('<a class="btn btn-mini" href="#">' + options.buttonText + '</a>').prepend('<span class="icon-plus"></span>').appendTo(element)[0];
        var input = $('<input type="text">').appendTo(element)[0];

        ko.applyBindingsToNode(button, {
            hidden: editing,
            click: function () {
                editing(true);
            }
        });

        ko.applyBindingsToNode(input, {
            value: newValue,
            visible: editing,
            hasFocus: editing,
            //valueUpdate: 'afterkeydown',
            onEnter: function(data) {
                debugger;
                options.data.push(data);
                editing(false);
            }
        });
    }
};

问题是在绑定到onEnter绑定的函数中，数据参数始终未定义，因此新值永远不会被推入数组。

请参阅我的小提琴以获取完整示例

4

1 回答 1

1

有两件事可以提供帮助：

  • 该applyBindingsToNode调用接受第三个参数，您可以在其中提供上下文。在我的一些示例中，上下文无关紧要，因为它直接写入可观察对象并且不需要数据。因此，您可以将context（或viewModel）作为第三个参数传递给您的第二个applyBindingsToNode调用。

  • 如果我了解您要执行的操作，那么我认为您可以执行以下操作： options.data.push(new Item(newValue());而无需担心上下文/数据（这将是整体视图模型，因为您处于顶层范围）。

示例：http: //jsfiddle.net/rniemeyer/Pmns4/

于 2013-03-22T14:00:30.433 回答