Question

我正在使用durandaljs并加载shell视图，然后加载内部视图：page1。我约束shell中的某些项目，我希望在内部视图中更改这些项目：page1。例如：

shell.html

<div class="container">
  <div data-bind="text: someValue"></div>
  <section id="content" class="main container-fluid">
    <!--ko compose: {model: router.activeItem, 
        afterCompose: router.afterCompose,
        transition: 'entrance'} -->
    <!--/ko-->
  </section>
</div>

shell.js

define(['durandal/plugins/router', 'global'],
function (router, global) {
  function activate() {
    global.shellViewModel = shell;
    return router.activate('page1');
  }
  var shell = {
    //...
    someValue: ko.observable('hello world'),
    activate: activate
  };
  return shell;
});

page1.js

define(['durandal/plugins/router', 'global', 'viewmodels/shell'],
function (router, global, shell) {
  function activate() {
    return;
  }
  var page1SomeValue = ko.computed(function() {
    shell.someValue('hello world');
  });
  var vm = {
    //...
    activate: activate,
    somePage1Value: somePage1Value
  };
  return vm;
});

加载page1后，global.shellViewModel.someValue('hello world');会被执行，但shell视图上的值不会更改。为什么？我做错了什么？

Answer 1

基于事件不起作用的评论，可能存在someValue声明方式的问题。您是否尝试在someValue之外声明shell，然后在activate()内填充它？

define(['durandal/plugins/router', 'global'],
function (router, global) {
  var someValue = ko.observable('');
  var shell = {
    //...
    someValue: someValue
    activate: activate
  };
  return shell;

  function activate() {
    someValue('greeting from shell');
    global.shellViewModel = shell;

    return router.activate('page1');
  }
});

Answer 2

http://rainerat.spirit.de/so16363046/#/

的工作示例

由于我没有看到代码粘贴与工作版本存在任何实质性差异，我的假设是global.js存在差异：

define(function () {
    global = {};


    return global;
});

Answer 3

我在初始问题上忘记提及的是somevalue被设置在ko.computed VM的page1属性中，无论出于何种原因，它都会导致某种冲突刷新page1和shell视图。我通过在shell.somevalue('hello world');内设置setTimeout来修复此问题：

var page1SomeValue : ko.computed(function () {
  setTimeout(function() {
    //shell is required by page1 viewmodel
    shell.someValue('hello world from page 1');
  }, 100);
});

如何在页面中更改shell的viewmodel属性？

3 个答案: