Question

我有一个带有3个jquery-mobile页面小部件的html页面。每个页面窗口小部件都具有相同的标头，子链接的配置略有不同。我想将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>

首先呈现第一页的视图，在这种情况下是新闻视图。此页面创建标题视图的实例。使用标题时会出现问题。

1）如何针对第一页专门定位标题“#news标题”，同时保持足够的灵活性，以便在我准备好时使用不同的参数集再次调用它加载更新页面？

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

3）如何将第一个实例化标头传递给其余视图？或者我是否认为这一切都错了，我是否应该扩展一个基本的标题视图作为我的每个页面的模板，这些页面是用一组配置编写的？

每个标头之间唯一不同的是它将附加到渲染视图中的元素的类名以及它为页面创建的一些锚链接。为此，我试图尽可能多地重用视图以获得轻微的足迹。

注意：不确定是否重要，但我使用的是requirejs。也许有一种建议的方法来创建一个View，并且在必要时总是让它重用，因为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视图渲染为具有不同配置的多个元素

1 个答案: