1

我需要将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() {}对象添加到 myviewModel中，因为.toJS()在转换过程中会剥离它们。

更新：

Aaand 解决所有这一切的方法很有趣

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

1 回答 1

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/

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

于 2012-10-19T09:59:59.450 回答