Knockout、Require、Sammy 和每个页面的视图模型——我如何使它工作？

Question

我有一个 KO 应用程序，我的每个页面都有一个单独的视图模型来处理该页面上所需的所有操作（加载、添加、编辑、删除等）。我已经设法使用 RequireJS 将代码拆分为多个模块，但我找不到使用 Sammy 让多个视图模型同时工作的方法。

这是我目前在我的init.js 文件中的设置，它将内容加载到第一页。它有效：

require(['jquery', 'ko', 'sammy', 'viewmodels/page1'], function($, ko, sammy, page1) {
  var page1VM = new page1.ViewModel();
  ko.applyBindings(page1VM);

  var app = sammy('#wrapper', function() {
    this.get('#page1', function() {
      page1VM.loadContent();
    });

    this.get('#page2', function() {
      // do nothing yet
    });

    [...]

    this.get('#pageX', function() {
      // do nothing yet
    });
  });

  app.run('#page1');
});

如何将我的其他视图模型绑定到其他页面？

我还尝试为this.get 中的每个页面添加一个单独的ko.applyBindings，当我切换回已经应用了这些绑定的页面时，这会引发错误。

Answer 1

http://jsfiddle.net/PgLgz/4/

好吧，我回到小提琴并清理了所有代码，以有效地向您展示我的答案的意思 -

function myViewModel() {
    var self = this;
    self.message = "hey";
    self.page1VM = new page1VM();
    self.page2VM = new page2VM();
    var app = sammy('#wrapper', function() {
        this.get('#page1', function() {
            page1VM .loadContent();
        });
    });
};

ko.applyBindings(new myViewModel());

请记住，虽然在小提琴中我不能真正使用 Sammy.js（我没有更改视图或导航）并且基本上没有理由使用 Require.js，因为它只是一个示例，我把所有视图模型在同一个 JS 文件中。

由于您使用的是 Sammy 和 Require，您需要获取此代码并将其在功能上应用到您的站点，或者在某处发布更多代码。