骨干视图在模板中没有得到 el

Question

我用自己的html调用列表元素的视图，在这个视图中有一个对单个项目的另一个视图的迭代调用。问题是listelement的第一个视图看不到自己的html。如果我将 el 设置为获取 id (el:$("#pagination-centered") ) ，我想在其中追加迭代单个元素，不要渲染。

列表元素视图：

        define(["jquery", "underscore", "Backbone", "Handlebars",  
   "views/singlepostview", "text!templates/home.html"],**<--html**
   function ($, _, Backbone, Handlebars,SinglePost, template) {

  var Home = Backbone.View.extend({
   el:$("#pagination-centered"),//it is inside home.html defined above 

    template: Handlebars.compile(template),

    initialize: function () {
     // this.model.bind("reset", this.render, this);

    },


       events: {

    },      



    render: function (eventName) {
       $(this.el).empty();
      _.each(this.model.models, function (ad) {
        $(this.el).append(new SinglePost({
          model: ad
        }).render().el);
      }, this);


      return this;



         }




         });

     return Home;

      });

单元素视图：

        define(["jquery", "underscore", "Backbone", "Handlebars", "text!templates/singlepost.html"],
function ($, _, Backbone, Handlebars, template) {

var SinglePost = Backbone.View.extend({
     //el:$("#pagination-centered"),
    //tagName: "li",

    events: {
      "click": "goToDetails"
    },

    template: Handlebars.compile(template),

    initialize: function () {
      this.model.bind("change", this.render, this);
      this.model.bind("destroy", this.close, this);
    },

    render: function (eventName) {
      var ad = this.model.toJSON();
     // console.log(ad);
      ad.cid = this.model.cid;
      $(this.el).html(this.template(ad));
      return this;
    },

    goToDetails: function () {
      Backbone.history.navigate("#user/"+this.model.id, {trigger: true});
    }
  });

return SinglePost;

与视图主页关联的模板（元素列表）：

         <div class="row">

            <div class="page-header ">
              <p class="pull-right"><a href="#">see all</a></p>
              <h4>Honors <small>(10)</small></h4>
            </div>

            <div class="pagination-centered">


            </div>

       </div>

与查看 SinglePost（列表项）关联的模板：

       <a href="#"><img src="{{immagine.url}}" class="img-circle"></a>

我想在 Home 视图的模板内，特别是在 div class="pagination-centered" 内渲染这个（最​​后一个）singlepost 视图的 singlepost 模板。 将按以下方式完成：

              **<div class="row">

            <div class="page-header ">
              <p class="pull-right"><a href="#">see all</a></p>
              <h4>Honors <small>(10)</small></h4>
            </div>

            <div class="pagination-centered">

            *<a href="#"><img src="{{immagine.url}}" class="img-circle"></a>*


            </div>
          </div>**

Answer 1

$("#pagination-centered") 将在当前窗口 dom 中查找该选择器。这意味着如果您的模板的内容（定义 pagination-centered 元素的位置）不在 dom 中，则将无法找到它（向 null el 屈服，并且没有渲染任何内容）。

我认为有更清晰的方法可以在 Backbone 中实现良好的模板，但在您的情况下，快速简单的方法是将视图创建为

var Home = Backbone.View.extend({
    tagName: "section",
    render: function() {
        this.$el.html( /* load the content of your home template here */);
        var list = this.$('#pagination-centered')
        for ( ... ) // here you loop over your models
            list.append(singlePost.render().el);
        return this;
}

var SinglePost = Backbone.View.extend({
    tagName: "li",
    render: function() {
        this.$el.html( /* load the content of your single post template here */);
        return this;
    }
}

Backbone Views 中的一个常见缺陷是每个视图都有一个 implicit 元素，该元素包装了所有被渲染的内容。在这种情况下，例如，您的 Home 模板将在 section 中呈现。您尝试做的事情（将 el 属性分配给某个 dom 选择器）虽然在技术上是可行的，但并不是实现该目标的常见或建议方法。

另一个建议是尝试使用有意义且语义正确的标记。如果pagination-centered 是一个列表，它应该是ul 或ol，而不是div。