javascript - 尝试循环 Backbone 中的集合以输出 DOM 中的属性

Question

我最近将我的主干 js 文件更新到了最新版本，你知道什么东西坏了 - 太令人沮丧了。我正在 View 中实例化一个集合，并且尝试循环访问该集合，但它只输出集合中的最后一项，无法弄清楚为什么这是我的代码

 NavView = Backbone.View.extend({  
el : $('ul'), 
initialize: function(){

 _.bindAll(this, 'render');
  this.navCollection = new NavigationCollection([ {name: "home", href: '/home'},{name: "about", href:'/about'},{name: "contact", href: '/contact'}]); 
  this.render();

},

我尝试了很多方法来呈现下面的集合代码

 render : function() {
  this.navCollection.each(function (item) {
        $(this.el).append("<li><a href=" + item.get("href") + ">" + item.get("name") + "</a></li>");
    }, this);
    return this; // remember this for chaining
  //also tried this method as well

 _.each(this.navCollection.models, function(item){
        //$(this.el).append("<li><a href=" + item.get("href") + ">" + item.get("name") + "</a></li>");
        $("<li><a href=" + item.get("href") + ">" + item.get("name") + "</a></li>").appendTo(this.el);
    },this)
    return this; // remember this for chaining
 },

无论哪种方式，它都只输出最后一个项目联系人而不是三个项目 看到这里http://dalydd.com/projects/backbone/backbone.html

var NavigationItem = Backbone.Model.extend({
    defaults: {
        name: '',
        href: '',
        last: false,
        id: ''
    },
    initialize: function() {

    }
});

var NavigationCollection = Backbone.Collection.extend({
    model: NavigationItem,
});

在它输出所有内容之前，但是当我将主干更新到较新版本时，它只打印出 1 - 一如既往，我们感谢任何帮助。

谢谢

Answer 1

在您的 NavigationItem 定义中，将 id 的默认值设置为空字符串:

var NavigationItem = Backbone.Model.extend({
    defaults: {
        name: '',
        href: '',
        last: false,
        id: ''
    }
});

在 Backbone 0.9.9 中，模型以相反的顺序添加，duplicate models are rejected ，一个空字符串被接受为有效 ID，为您留下集合中的最后一个模型。删除 id 的默认值来解决您的问题

var NavigationItem = Backbone.Model.extend({
    defaults: {
        name: '',
        href: '',
        last: false
    }
});

• 重现您的问题的 fiddle :http://jsfiddle.net/nikoshr/PmFEz/
• 修改后的 fiddle :http://jsfiddle.net/nikoshr/PmFEz/1/