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>

我需要能够从$data事件传递click:，执行隐藏的div。

也许我过度思考这个问题，但我的viewModel有很多不同的Actions深埋在viewModel.DataGroups.DataGroup.ActionDataGroup中，并且只有一个HTML表单可以编辑操作信息，所以我可以'弄清楚如何使表单只显示我想要编辑的一个特定操作。

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

更新

Aaand解决所有这一切都是热闹的搞笑

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

Answer 1

根据我的理解，你想要一个类似'点击编辑'的功能，只需2个自定义绑定就能很好地解决这个问题！

这种方法的最大优点是你不会使用额外的observable来对你的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/

归功于Ryan Niemeyer。

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

1 个答案: