使用mvc3 knockout.js和sammy.js的单页面应用程序

Question

我被困在项目的一个特定部分，其中包含标题中提到的组件。

我目前有一个概念证明，它按照我希望它的工作方式工作：

• Sammy被整合到淘汰视图模型中（根据淘汰赛网站上的教程）
• 视图是由控制器按需加载的（因此我不必在应用程序页面上定义每个视图）

在我目前的情况下，我在应用程序启动时实例化viewmodels（如果我不实例化它们，Sammy将不会处理路由）。 问题是Sammy加载和交换视图的位置。 我必须调用ko.applyBindings来让KO绑定到视图。 但是反复调用申请的不良做法。

我的问题是，如何绑定我按需加载的视图？ 我不能调用ko.applybindings，因为当视图加载多次时会产生内存泄漏。

这是一个带有违规的ko.applyBindings的示例VM：

function serviceInfoVm() {
var self = this;

self.ObjectKey = ko.observable();
self.Service = ko.observable();

self.LoadService = function () {
    $.get('ServiceData/Detail', { serviceId: self.ObjectKey() }, function (data) {
        self.Service(data);
    });
};

$.sammy('#content', function () {
    this.get('#/service/:id', function (context) {
        var ctx = context;
        self.ObjectKey(this.params['id']);

        self.LoadService();

        $.get('Content/ServiceInfo', function (view) {
            ctx.app.swap(view);
            ko.applyBindings(self);
        });
    });

}).run();
};

任何有这个问题的指针和/或解决方案的人？

Answer 1

您在viewmodel中有Sammy代码，如果该视图模型将存在并且您希望加载子视图模型和视图，则该代码可以很好地工作。 所以我认为这就是你要做的。 深思熟虑......将sammy代码分离到自己的模块中（我称之为router.js中的路由器）并让它管理与任何viewmodel分开的导航。

但回到你的代码......你可以设置你的子视图和子视图模型，并在调用sammy.get之前对它们使用applybindings。 基本上，您提前注册路线。 然后sammy.get只导航到新视图，该视图已经是数据绑定。

Answer 2

不是解决方案而是另一种方法：

最终放弃了动态加载视图的想法。 现在，我的视图始终显示在页面中，并且可见性由此代码触发：

var app = function () {
var self = this;

self.State = ko.observable('home');

self.Home = ko.observable(new homepageVm());
self.User = ko.observable(new userInfoVm());

$.sammy(function () {

    this.get('#/', function (context) {
        self.State('home');
    });

    this.get('#/info/:username', function (context) {
        self.State('user');
        self.User().UserName(context.params['username']);
        self.User().LoadInfo();
    });

}).run();

};

以这种方式触发div可见性：

<div id="homeView" data-bind="with: Home, visible: State() === 'home'">

这样，只需在应用程序启动时调用ko.applyBindings一次。 上面的viewmodel绑定到我们的shell页面。

更多关于这里

Answer 3

在返回的模板中的特定元素上调用applyBindings是一个选项：

ko.applyBindings(viewModel, htmlNode) 

另请参阅关于延迟加载模板的这个问题： knockout.js - 延迟加载模板

这里有关于applyBindings的文档： http ：//knockoutjs.com/documentation/observables.html