Marionette/Backbone 查看缓存

Question

我想用 Marionette 中的一个（或可能是它自己的）区域缓存 ItemView html。

这个过程是在不同的视图中以不同的形式进行的。在访问每个阶段时，我们想附加显示特定的 ItemView，但我们也希望能够重新访问任何以前的视图，并且 html 更改表单数据并继续更新后续视图。

这里我刚刚将视图添加到路由呼叫的区域。

buildView: function (page) {
    try {
        var view = new View[page]();
    } catch (error) {
        console.debug('This View Doesn\'t Exsist --> [' + page + ']', error);
    }

    Layout.body.show(view, { preventDestroy: true });
}

我能够为每个 ItemView 使用不同的区域来保留以前的视图..

buildView: function (page) {
    var _region = Layout[page], _view;

    if (_region.hasView()) {
        _region.show(_region.currentView);
    } else {
        try {
            _view = new View[page]();
        } catch (error) {
            console.debug('This View Doesn\'t Exsist --> [' + page + ']', error);
        }
        _region.show(_view, {preventDestroy: true});
    }
}

有谁知道这种用法的好解决方案并显示以前的 ItemView，同时能够在必要时更新新视图？

我们是否应该恢复到在需要时隐藏和显示每个区域，并让它存储我们渲染的 html？

如果有人不确定我在这里要解释的内容，我很乐意提供更多信息！

谢谢，对于粗略且可能不是很有洞察力的问题，我们深表歉意^^。

Answer 1

有很多不同的方法可以做到这一点，但我建议不要尝试缓存和重用视图。它不会显着提高性能，丢弃视图并创建新视图也没有错。

如果我这样做，我会考虑将每个步骤视为集合中的一个模型，然后您逐步添加的每个视图都可以访问整个集合，如果它需要了解以前视图中的数据的话。

下面是一些可能与您的用例匹配或不匹配的假设代码：

var steps = new Backbone.Collection();

steps.add({
  name: null,
  address: null
});

var view1 = new Step1View({ model: steps.last() });

region.show(view1);

//...
//now something happens and you're ready to show the next view

steps.add({
  age: null,
  occupation
})

var view2 = new Step2View({ model: steps.last() });
//if view2 needs to know about previous steps it has access to all the data as this.model.collection

region.show(view2);

//...
//now if you need to go back you can just pop the last model off the stack and show the view1 again
steps.pop();

var view1 = new Step1View({ model: steps.last() });
region.show(view1);

我会做类似的事情，尽管我会 refactor/abstract 多一点。

Marionette/Backbone 查看缓存

Marionette/Backbone View Caching

backbone.js

marionette