将 Backbone 视图呈现为具有不同配置的多个元素

Question

我有一个包含 3 个 jquery-mobile 页面小部件的 html 页面。每个页面小部件都具有相同的 header，但子链接的配置略有不同。我想将 Header 创建为 BackboneView 并为每个页面小部件呈现它。每个页面小部件也有自己的视图。页面模板如下所示：

<body>

    <div id="news" data-role="page">
        <header class="header"></header>
    </div>

    <div id="updates" data-role="page">
        <header class="header"></header>
    </div>

    <div id="stuff" data-role="page">
        <header class="header"></header>
    </div>

</body>

第一页的视图（在本例中为新闻视图）首先呈现。此页面创建 header 视图的实例。使用 header.

时出现问题

1) 如何专门针对第一页“#news header”定位 header，同时保持足够的灵活性让我能够当我准备加载更新页面时，使用一组不同的参数再次调用它？

2) 当我准备加载更新页面时，它将有一组不同的配置需要定位“#updates header”。因此我不想在视图上硬编码 tagName。

3) 如何将第一个实例化的 header 传递给其余的视图？还是我认为这一切都是错误的，我是否应该扩展基本 Header 视图作为我的每个页面的模板，这些页面带有一组配置？

每个 header 之间唯一不同的是 class 名称，它将附加到渲染视图中的元素，以及它为页面创建的一些锚链接。为此，我正在尝试尽可能多地重用视图以减少占用空间。

注意：不确定这是否重要，但我使用的是 requirejs。由于 requirejs 将模块作为单例处理，也许有一种建议的方法来创建视图并在必要时始终重用它？

谢谢！

Answer 1

使用像 appView.js 这样的概述。它将负责渲染所有子视图。

在 appView 中（您需要在这个超级模块 HeaderView 中要求您的子视图）：

initialize: function() {
    this.$news = $('#news');
    this.$updates = $('#updates');
    this.$stuff = $('#stuff');
},

render:function() {
    var newsView = new HeaderView(param1,param2);
    this.$news.append(newsView.render().el);
    // do the same for your other subviews
}

在您的子视图中（比方说 NewsView）

initialize:function(param1,param2) {
    this.viewclass= param1;
    //set the other things you need here
},

render: function() {
    this.$el.html("my content here..model/template/anything"));
    this.$el.attr('class',this.vewClass);
}

请记住，重点是概述创建新的 SubView 和调用 render()。我希望它有所帮助。

编辑：如果您正在等待一些数据加载特定的子视图，请使用承诺。如果你正在等待一个集合完成获取使用类似的东西

collection.fetch(function() {
    success:function(res,model) {
        new subView(model);
    }
}

将 Backbone 视图呈现为具有不同配置的多个元素

Rendering Backbone view into multiple elements with different configurations

jquery-mobile

backbone.js

requirejs