父/子或视图/子视图viewmodel数据交互

时间:2013-09-18 12:34:02

标签: knockout.js durandal

嗯。我有点以为我会把它钉在那里,在某种程度上,我有。我仍然不确定如何在MVVM术语中正确地构建事物。

所以,简单的场景:主视图模型有两个通过“compose”绑定加载的子视图,并使用“preservecontext:true”参数来确保root / parent viewmodel变量可用:

主要观点:

<section class="view">
    <div class="row">
      <div class="col-md-4">
          <section id="content-left">
            <div data-bind="compose: { model: leftColTree, preserveContext: true }"></div>
          </section>
      </div>
      <div class="col-md-6">
        <section id="content-mid">
            <div data-bind="compose: { model: articleSection, preserveContext: true }"></div>
        </section>
      </div>

      <div class="col-md-2">
          <section id="content-right">
              right col
          </section>
      </div>
    </div>

主视图模型(删除了无关代码):

define(['services/datacontext',  'durandal/system'], function (datacontext, system) {
    var leftColTree = ko.observable('viewmodels/groupTree'); 
    var articleSection = ko.observable('viewmodels/lt_articleRead');
    var selectedArticle = ko.observable(-1);
    var articleSelected = ko.observable(false);
    var selectedGroupId = ko.observable(-1);

    var vm = {
        leftColTree: leftColTree,
        articleSelected: articleSelected,
        articleSection: articleSection,
        selectedGroupId: selectedGroupId,
        selectedArticle: selectedArticle
    };

    return vm;
});

如果用户选择一个组ID(在自定义绑定处理程序中处理并正常工作)然后单击“新建”按钮,则“articleSection”observable将更新为“viewmodels / lt_articleEdit”并加载articleEdit view / model并将“selectedGroupID”设置为用户选择的值。我有一些调试表明这一切都很好。

articleEdit view(再次删除了许多不相关的代码):

<div>
    <input data-bind="value: newArticle().description" placeholder="Please enter a title."/>
    <a href="#" class="btn" data-bind="css: { 'btn btn-default': true}, click: save"><i class = icon-save></i> Save</a>
</div>

和articleEdit viewmodel:

define(['services/datacontext'], function (datacontext) {

    var newArticle = ko.observable();

    var activate = function () {
        return datacontext.newArticle(newArticle).then(setNewArticleVariables());
    };

    var setNewArticleVariables = function() {
        newArticle().groupId(123);
    }

    var save = function () {
        return datacontext.saveChanges();
    };


    var vm = {
        activate: activate,
        save: save,
        newArticle: newArticle
    };

    return vm;

});

所以...在“setNewArticleVariables”方法中我当前在“123”中硬编码作为测试它的图,我想使用root / master viewmodel中的“selectedGroupID”。问题是我没有看到我如何访问这个变量,因为当我在articleEdit视图模型中时它已经脱离了上下文。

顺便说一句,在主级别设置/保存的其他变量也有很多(超过10个),这些变量将在不同的子视图中用于应用程序的不同部分,所以这不仅仅是“怎么做”我从子视图“问题中访问一个变量,但是请求”管理/维护多个视图模型中有效全局应用程序变量的“最佳实践”。

1 个答案:

答案 0 :(得分:1)

根据要求: 您是否考虑过在Session Data with Durandal讨论使用共享的AMD或真正的全球?