Question

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

大部分绑定来自Ryan Niemeyers的例子 - 发现here

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绑定的函数中，数据参数始终未定义，因此新值永远不会被推送到数组中。

请参阅我的fiddle以获取完整示例

Answer 1

有两件事可以提供帮助：

applyBindingsToNode调用接受第三个参数，您可以在其中提供上下文。在我的一些示例中，上下文是无关紧要的，因为它直接写入observable并且不需要数据。因此，您可以将context（或viewModel）作为第三个参数传递给您的第二个applyBindingsToNode来电。
如果我理解你要做的事情，那么我认为你可以做一些像options.data.push(new Item(newValue());这样的事情，而不需要担心上下文/数据（这将是整体的查看模型，因为您处于顶级范围内。

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

使用KnockoutJS的ClickToEdit按钮

1 个答案: