Question

我正在用自己的html调用list元素的视图，在这个视图中有一个迭代调用单个项目的另一个视图。问题是，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”中。将完成：

              **<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中，则不会找到它（yelding为null el并且没有呈现任何内容）。< / p>

我认为在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中常见的一个缺陷是每个视图都有一个隐式元素，它包装了所有渲染的内容。在这种情况下，例如，您的主页模板将在section内呈现。您尝试做的事情（将el属性分配给某个dom选择器）虽然技术可行，但这并不是实现这一目标的常用或建议方法。

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

骨干视图不会在模板中获得

1 个答案: