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？

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

谢谢，很抱歉粗鲁且可能不是很有见地的 Q ^^。

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

我会做类似的事情，尽管我会重构/抽象一点。