javascript - 如何在 Durandal 中禁用缓存 View

Question

我有一个 View 模型:

define(['knockout'], function (ko) {
        var self, albumWrapper;

        albumWrapper = function () {
            self = this;

            // get album name from url parameter
            var albumName = routerWrapper.router.activeInstruction().params[0];
            self.retrieveAlbum(albumName);
        };

        albumWrapper.prototype = {
            retrieveAlbum: function (name) {
                /* do something to retrieve data */
            }
        }

        return new albumWrapper();
    });

我配置路由通过以下网址转到此 View :#gallery/album/:name

但是当参数(/:name)被这段代码改变时:

window.location.href = '#gallery/album/' + data.name();

这个 View 模型只是第一次出现，所以我无法检索任何新专辑。我认为这个问题是因为缓存 View ，但我不确定。请帮我解决这个问题。在这种情况下我使用 durandal。

Answer 1

我不认为你的问题是缓存，我认为这与你设置 View 模型的方式有关。据我所知，durandal 将第一次解析您的 View 并使用上面的代码来创建 View 模型。返回 new albumWrapper() 将导致您的 View 模型成为单例。构造函数只会在第一次时被调用，再也不会被调用。您可以尝试在 albumWrapper() 之前删除 new 关键字以返回该函数而不是它的新实例。这样 durandal 每次都会创建一个新的 View 模型，这也会导致构造函数中的代码每次都运行。尽管更好的方法可能是使用 activate 函数并让模块生命周期为您工作。请参阅以下更改:

define(['knockout'], function (ko) {
    var self, albumWrapper;

    albumWrapper = function () {
        var self = this;

        self.CurrentAlbum = ko.observable();
    };

    albumWrapper.prototype = {
        retrieveAlbum: function (name) {
            /* do something to retrieve data */
        },
        activate: function(name) {
            var self = this;    
            var selectedAlbum = self.retrieveAlbum(name);
            self.CurrentAlbum(selectedAlbum);
        }
    }

    return albumWrapper();
});

现在 durandal 应该获取 View 的一个实例，但每次请求路线时都使用任何路线参数调用激活函数。还添加了一个名为“当前相册”的可观察字段，您可以将 View 元素绑定(bind)到该字段。导航离开路线不会导致 View 实例像网页一样从内存中删除，它只是坐在那里直到您下次再次导航到路线时为止，更像是桌面应用程序交换屏幕。每次导航时都会调用激活函数，并允许您设置路线上新相册名称的 View 。假设retrieveAlbum函数返回一个具有名称、日期、艺术家等属性的专辑对象，您可以将其设置为当前专辑可观察值的值，它将自动更新 View 上的元素。在此处查看有关路由和 View 生命周期的文档:

http://durandaljs.com/documentation/Using-The-Router.html

http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks.html