如何在durandal / knockout中的自定义绑定中访问父视图模型或根视图模型

时间:2013-09-12 08:32:32

标签: knockout.js durandal

这是一个澄清实现这一目标的最佳方法(或任何方法!)的问题。这可能是我试图将我的.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不能以这种方式使用,所以这就是我解开的地方! / p>

2 个答案:

答案 0 :(得分:14)

您可以从绑定上下文(init/update函数的 5th 参数)访问它:

init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) 
 {  
    bindingContext.$data          // current data
    bindingContext.$parent        // parent binding  
    bindingContext.$parents[0]    // same to bindingContext.$parent  
    bindingContext.$parents[1]    // parent of parent  
    bindingContext.$parentContext // same with bindingContext but from parent
    bindingContext.$root          // you root View Model  
 // ...  
 }

答案 1 :(得分:1)

您可以在根视图模型中订阅事件,并在选择文章时从绑定处理程序触发该事件。

http://durandaljs.com/documentation/Leveraging-Publish-Subscribe.html