Question

我有一个包含一个模型的集合。在我的模板中，我应该能够做到：

<% _.each(collection, function(model) { %> 
  <p>logged in <%= model.username %>!</p>
<% }); %>

但我发现我需要这样做：

<% _.each(models, function(model) { %> 
<p>logged in <%= model.attributes.username %>!</p>
<% }); %>

我不确定问题究竟是什么，但模型没有正确填充。任何人都知道为什么会发生这种情况以及我如何设置模型中的值以便我可以循环遍历模型集合并使用model.username来访问这些值？

提前谢谢。

这是我的模特和收藏品：

var AccountModel = Backbone.Model.extend({
defaults: 
{
    username: "bob"
}
});

var AccountCollection = Backbone.Collection.extend(
{
    model: AccountModel,
    url: "/php/account-details.php",

    parse: function(data, xhr)
    {
   return data
    },

    initialize: function()
    {

    }
});

这是我的获取功能：

fetchAccountCollection: function(){

   var $this = this;

$this.homepageAccountCollection = new AccountCollection();

$this.homepageAccountCollection.fetch(
{
    dataType: "json",
    cache: false,

    success: function(collection)
    {
      Backbone.trigger('accountcollection:loaded', collection);
    },

    error: function()
    {
      console.log("fetchAccountCollection: error");
    }
});

}，

当调用success函数时，触发器调用控制器中的render函数：

renderAccount: function(collection)
{
  var $this = this;

  $this.loginPageView = new LoginView(
  { 
    el: '#login-form',
    template: 'loggedin-template',
    collection: collection
  });

$this.loginPageView.render();
},

当$ this.loginPageView.render（）;被称为执行以下代码：

render: function() 
{
var collection = this.options.collection;
    var tpl = _.template($(this.options.template).html(), collection);
    this.$el.html(tpl);

    return this;
},

从PHP脚本中返回用户名的值，如下所示：

         $array=array('username' => $user['username']);
         echo json_encode($array);

Answer 1

Underscore的each方法（和许多其他方法）直接混合到集合中。使用collection.each(function () { ... })代替_.each(collection ...)。

Answer 2

问题是您将Backbone.Collection传递给了模板，因此当您最终在模板中调用以下内容时：

_.each(models,function(model) { ... });

您正在遍历collection.models数组，该数组是Backbone.Model的数组。由于Backbone.Model存储attributes属性中的模型值，您必须通过model.attributes.username访问，您也可以使用model.get('username')，这也可以。

正如您所说，您希望通过model.username进行访问，并且可以在将collection.toJSON()传递给模板之前调用{collection:collection.toJSON()};来执行此操作，您必须将其放在对象中，例如，{ {1}}。查看documentation for toJSON。该方法适用于Backbone.Collection和Backbone.Model。

代码如下：

render: function()  {
  var collection = this.options.collection;
  var tpl = _.template($(this.options.template).html(), {collection:collection.toJSON());
  this.$el.html(tpl);
  return this;
}

然后你可以使用你的模板：

 <% _.each(collection, function(model) { %> 
   <p>logged in <%= model.username %>!</p>
 <% }); %>

这是一个最小的JSBIN DEMO。

作为旁注：看起来你使用的是骨干版本＆lt; 1.1.0。请注意this.options在较新版本中消失。升级时，请务必查看Change Log。

Backbone JS正确填充模型/集合

2 个答案: