gpt4 book ai didi

javascript - knockout : Passing click event data to a div

转载 作者:行者123 更新时间:2023-11-28 02:38:57 24 4
gpt4 key购买 nike

我需要将数据从 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]);
};

最佳答案

据我了解,您需要类似“点击编辑”功能的功能,只需 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。

关于javascript - knockout : Passing click event data to a div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12966170/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com