javascript - knockout : Passing click event data to a 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 个自定义绑定(bind)即可轻松解决该问题!

这种方法的最大优点是您不会用额外的可观察量污染您的 viewModel。

绑定(bind):

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
        });
    }
};

View 模型

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

HTML

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

工作 fiddle :http://jsfiddle.net/8Qamd/

所有功劳都归功于 Ryan Niemeyer。