knockout.js - 如何从页面内更改 shell 的 viewmodel 属性？

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它被设置在虚拟机的一个ko.computed属性中，无论出于何种原因，它在刷新视图page1时都会引起某种冲突。我通过将内部设置为这样来解决问题：page1shellshell.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);
});

Answer 2

Based on the comments that events are not working either there might be an issue with the way someValue is declared. Did you try to declare someValue outside of shell and then populate it within 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 3

http://rainerat.spirit.de/so16363046/#/的工作示例

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

define(function () {
    global = {};


    return global;
});