1

我正在调用带有自身 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>

我想在主页视图的模板中，特别是在 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>**
4

1 回答 1

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

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

于 2013-06-03T14:39:19.893 回答