这是一个澄清实现这一目标的最佳方法(或任何方法!)的问题。这可能是我试图将我的 .net 编码经验应用于这种新的做事方式的方式,但我无法相信这对许多编码人员来说不是现实世界的问题。
所以。主视图/视图模型在页面上使用许多子视图,因为某些部分会根据用户的选择/操作而变化。这些子视图组成母版页:
<div data-bind="compose: { model: articleSection, preserveContext: true }"></div>
...在子视图中,我可以引用控制主视图的根可观察对象,如下所示:
<a href="#" class="btn" data-bind="css: { 'btn btn-default': true, 'btn-primary': $root.inEditMode() }, click: $root.setEditMode, enable: $root.articleSelected()">Edit</a>
但是,其中一个子视图本身有一个子子视图,它使用自定义绑定和模板进行构造,因为它是树视图,需要能够递归地构造布局。
子视图代码只是:
<div id="fancytree" data-bind="groupTree: treeGroups">
<!--<ul data-bind="template: { name: 'itemTmpl', foreach: treeGroups }, groupTree: {}"></ul>/-->
</div>
模板只是:
<script id="itemTmpl" type="text/html">
<!-- Template used in labtool for tree-->
<li>
<span>
<span data-bind="text: name" />
</span>
<ul data-bind="template: { name: 'itemTmpl', foreach: children }"></ul>
</li>
</script>
自定义绑定是:
ko.bindingHandlers.groupTree = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var tm = valueAccessor();
var tmUnwrapped = tm();
$(element).fancytree({
minExpandLevel: 1,
source: tmUnwrapped,
lazyload: function (e, data) {
data.result = datacontext.getGroupChildren('1111');
},
activate: function (event, data) {
var node = data.node;
var tg = rootVm.selectedGroupId();
alert(node.title);
},
})
}
所以我的问题是我无法从我的.net 时代获得我认为的“全局变量”,这是在我的顶级根视图模型中观察到的,称为“selectedArticle”。当用户单击树视图节点时,会触发“激活”功能,弹出带有正确详细信息的警报,我只是希望能够将该值放入我的根视图模型中的 observable 中,这实际上是两个从自定义绑定处理程序的绑定上下文升级。
这一定是其他人做的事情,当然?我用谷歌搜索,直到脸色发青,但我显然错过了获得所需点击量所需的关键字或概念。在自定义绑定“激活”函数的伪代码中,我只是希望能够输入类似“root.selectedArticle = node.title”的内容,但显然 root 不能以这种方式使用,所以这就是我遇到问题的地方!