3

我被困在项目的一个特定部分，该部分由标题中提到的组件组成。

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

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

在我目前的情况下，我在应用程序启动时实例化视图模型（如果我不实例化它们，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();
};

有人对此问题有一些指示和/或解决方案吗？

4

3 回答 3

3

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

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

于 2012-08-06T16:34:50.057 回答
1

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

最终放弃了动态加载视图的想法。现在我的视图总是出现在页面中，可见性是由这段代码触发的：

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();

};

And the div visibility is triggered this way:

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

This way the ko.applyBindings only needs to be called once when the app starts. The viewmodel above is bound to our shell page.

More on this here

于 2012-08-07T06:56:25.980 回答
0

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

ko.applyBindings(viewModel, htmlNode)

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

以及适用于 applyBindings 的文档：http: //knockoutjs.com/documentation/observables.html

于 2012-08-06T15:28:58.853 回答