嵌套在另一个模板中的主干模板

backbone template nested in another template

本文关键字：嵌套 另一个      更新时间：2023-09-26

是否可以将模板嵌套在模板中并通过主干视图进行访问？

例如，我有使用模板 1 的视图

1，以及使用模板 2 的视图 2。 模板 2 实际上需要在模板 1 内部的 DIV 中。 我将模板 2 的 DIV 容器放在具有适当 id 的模板 1 中，但在呈现页面时它没有显示。 如果我从 Template2 内部删除 Template1div 容器并将其放在页面正文中，它可以正常工作。

所以只是想知道这是否可能，或者我是否必须嵌套视图/模型等才能完成这项工作？

模板

2 中的数据在技术上与模板 1 无关，只需要显示在嵌入在模板 1 中的页面上的某个位置。

我过去处理这个问题的方法是分别定义两个视图，然后在渲染 View1 时，创建一个新的 View2，渲染它，然后将其插入到 View1 中。 所以：

window.View1 = Backbone.View.extend({
    render: function() {
        this.view2 = new View2();
        this.$('insert-view-here').append(this.view2.render().el);
    }
});

您应该为此创建子视图。

我喜欢在关闭中私有化子视图并返回公共视图。

var View = (function (BV) {
    var View, Subview;
    // Only this main view knows of this subview
    Subview = BV.extend({ 
        template: _.template( subtmpl ),
        render: function () {
            this.$el.html( this.template( this.model.toJSON() ) );
            return this;
        }   
    }); 
    View = BV.extend({
        template: _.template( tmpl ),
        render: function () {
            this.$el.html( this.template( this.model.toJSON() ) );
            var subview = new SubView({ model: this.model }); 
            // replace a div in your template meant for teh subview with the real subview
            this.$el.find( "#subview" ).replaceWith( subview.render().el );
            return this;
        }   
    }); 
    return View;
}(Backbone.View));
var view = new View({ model: user });
var subview = new Subview; // Reference Error

当您需要在模板 1 中多次包含 Template2(例如作为<ul>中的<li>元素(时，另一个有用的选项是将 Template2 函数传递到 Template1 中。 (来自Rico Sta Cruz的Backbone Patterns。

TasksList = Backbone.View.extend({
  // Template1, inlined in js.
  template: _.template([
    "<ul class='task_list'>",
      "<% items.each(function(item) { %>",
        "<%= itemTemplate(item) %>",
      "<% }); %>",
    "</ul>"
  ].join('')),
  // Template2, inlined in js.
  itemTemplate: _.template(
    "<li><%= name %></li>"
  ),
  render: function() {
    var html = this.template({
      items: tasks /* a collection */,
      itemTemplate: this.itemTemplate
    });
    $(this.el).append(html);
  }
});

据我了解，典型的方法是将视图视为可以相互嵌入的完整对象。假设您有两个视图，视图 A 和视图 B。下面的代码演示如何将 ViewB 追加到 ViewA 中。

# this is coffeescript, but it's easily translated to JS
class ViewA extends Backbone.View
    initialize: () ->
        this.render()
    render: ()->
        this.$el.append(new ViewB().$el)
        this.$el.append(new ViewB().$el)
        return this

您可能会喜欢如何管理 ViewB(将其分配给属性或其他内容(，或者将不同的构造函数参数传递到每个 ViewB 实例中。

一个更精简的解决方案，不需要 jQuery append() 或涉及双 jQuery 作用域的附加 SubView 对象，是严格使用 underscore 方法预渲染/预编译，并使用主模板中的内部注释标签将子视图作为字符串插入。 

View = Backbone.View.extend({
  template: _.template(...),
  prerender: function(tpl,model){// pre-render a component
      var template = _.template(tpl);
      return template(model);
  },
  render: function(){
    var model = { ... };
    var component = this.prerender(this.itemTemplate, model);
    this.$el.html(this.template(model).replace('<!--#component-->', component));
  }
});

如果您的模板不是常量，并且取决于当前范围的属性，则此功能尤其有用。

请注意，对于此问题的范围，您必须将 View2 模型传递给组件。

相关文章：