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

我会做类似的事情，虽然我会更多地重构/抽象它。

木偶/骨干查看缓存

1 个答案: