KnockoutJS：将点击事件数据传递给 div

Question

我需要将 click: 事件中的数据传递到另一个 div。这是一个场景：

页面的一侧有一个链接。

<a data-bind="text: Name, click: $root.editAction"></a>

在页面的另一边，有一个隐藏的div。

<div data-bind="if: $root.editActionShow">
    <input type="text" data-bind="value: Name"/>
</div>

我需要能够从click: 事件中传递$data，做那个隐藏的div。

也许我想多了，但是我的viewModel有很多不同的Actions深埋在viewModel.DataGroups.DataGroup.ActionDataGroup中，而且只有1个HTML表单可以编辑动作信息，所以我不知道如何制作该表单仅显示我要编辑的一个特定操作。

这是另一个踢球者。我不想在我的viewModel 中添加任何可观察的内容。原因是我必须在最后进行.toJS() 映射，然后将 JSON 转换为 XML，这必须针对非常严格的模式进行验证，因此拥有额外的元素是一件坏事。它不会通过验证，除非我在转换之前手动删除它们。但是，我可以将this.blah = function() {} 对象添加到我的viewModel，因为.toJS() 在转换过程中会删除它们。

更新：

所有这一切的解决方案都非常有趣

viewModel.editAction = function(data) {
    viewModel.editActionFormShow(true);
    ko.applyBindings(data, $('#myHiddenDiv')[0]);
};

Answer 1

据我了解，您需要类似“点击编辑”功能，只需 2 个自定义绑定即可轻松解决！

这种方法的最大优势是您不会用额外的 observables 污染您的 viewModel。

绑定：

ko.bindingHandlers.hidden = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.visible.update(element, function() {
                return!value; });
        }
    };

ko.bindingHandlers.clickToEdit = {
    init: function(element, valueAccessor,allBindingsAccessor){
        var value = valueAccessor(),
            input = document.createElement('input'),
                        link = document.createElement('a');

        element.appendChild(input);
                    element.appendChild(link);

                    value.isEditing = ko.observable(false);

                    ko.applyBindingsToNode(link,{
                        text: value,
                        hidden: value.isEditing,
                        click: function(){
                            value.isEditing(true);
                        }
                    });

        ko.applyBindingsToNode(input,{
            value: value,
            visible: value.isEditing,
                            hasfocus: value.isEditing
        });
    }
};

视图模型

var vm = {
    name: ko.observable()
}

HTML

<div data-bind="clickToEdit: name"></div>

工作小提琴：http://jsfiddle.net/8Qamd/

所有功劳归瑞安·尼迈耶所有。