Question

我正在使用Mustache作为我在前端使用Backbone.js的Rails应用程序的模板。我能够获取正确的数据，但我正在努力让它填充我的列表。这是代码......

articles_router.js

Rssreader.Routers.Articles = Backbone.Router.extend({
  routes: {
    '': 'index',
    'articles/:id': 'show'
  },

  initialize: function(){
    this.collection = new Rssreader.Collections.Articles();
    this.collection.fetch();
  },

  index: function(){
    var model = new Rssreader.Models.Article({collection: this.collection});
    model.fetch({
      success: function(model){
        var view = new Rssreader.Views.ArticlesIndex({model: model});
        $('#articles').html(view.render().el);
        // console.log(view.render().el);
      }
    });
  }

});

articles_index.js

Rssreader.Views.ArticlesIndex = Backbone.View.extend({

  template: JST['articles/index'],

  initialize: function(){
    this.render();
  },

  render: function(){
    this.$el.html( this.template(this.model.toJSON()) );
    console.log(this.model.toJSON({}));
    return this;
  }

});

这是article.js中的模型

Rssreader.Models.Article = Backbone.Model.extend({
  urlRoot: '/articles',

  defaults: {
    "name": "default name",
    "summary": "default summary",
    "url": "default url",
    "published_at": "default published date",
    "guid": "default guid"
  }
});

这是模板。

<ul class="article_list">
  {{#articles}}
  <li>{{name}}</li>
  {{/articles}}
</ul>

我尝试了很多这个模板的迭代，它似乎没有打印任何东西。但是我可以在调用模板之前调试要遍历的数据，因此我知道它有数据。

有什么建议吗？

Answer 1

您可以使用句柄#each帮助程序（如果您有{articles: [{name: '1'}]}）或创建自己的句柄（如果您有[{name: '1'}]）：

Handlebars.registerHelper('articles', function(context, options) {
  var ret = "";

  for(var i=0, j=this.length; i<j; i++) {
    ret = ret + options.fn(this[i]);
  }

  return ret;
});

模板本身就像您的模板：

<ul class="article_list">
  {{#articles}}
  <li>{{name}}</li>
  {{/articles}}
</ul>

修改

在您的代码中，您使用了句柄集合#each：

<ul class="article_list"> {{#each collection}} <li>{{name}}</li> {{/each}} </ul>

Answer 2

您正在使用集合实例化ArticlesView，然后尝试渲染模型。

有几种不同的方法来迭代集合并渲染其模型，但最接近你的模型是：

  render: function(){
    this.$el.html( this.template({articles: this.collection.toJSON()}) );
    console.log(this.collection.toJSON());
    return this;
  }

和

之类的模板

<ul class="article_list">
  {{#each articles}}
  <li>{{name}}</li>
  {{/each}}
</ul>

Handlebars模板在Backbone中创建列表

2 个答案: