Question

我是Backbone的新手（不要讨厌我），但我正在试着做一件非常简单的事情。

我正在加载一个json文件（正确，因为我可以看到它在firebug中加载）我只想从中提取一些信息纯粹用于测试（作为我的第一个骨干代码）

但是，我无法使其工作并最终得到一个空白的li标签（下面的代码）

<ul id="phones"></ul>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>

<script id="foo" type="text/template">
        <li><%= name %></li>
    </script>

<script>

    var Phones = Backbone.Collection.extend({
        url:'http://backbone.local/phones/phones.json'
    })
    var PhonesView = Backbone.View.extend({
        el:'#phones',
        initialize:function(){
            this.collection = new Phones();
            this.collection.fetch();
            this.render();
        },
        template:_.template($('#foo').html()),
        render:function(){
                    var foo = this.collection.toJSON();
            $(this.el).html(this.template(foo));
            return this;
        }
    })
    var phonesView = new PhonesView();
</script>

任何指针都非常感激。

干杯，

更新1

我认为这可能是因为fetch is async所以我在成功回调fetch中调用了render，如下所示。 console.log在渲染的html中触发很好但仍然没有json数据（我也改为使用把手）

       <script>
        var Phones = Backbone.Collection.extend({
            url:'http://backbone.local/phones/phones.json'
        })
        var PhonesView = Backbone.View.extend({
            el:'#phones',
            initialize:function(){
                var self = this;
                this.collection = new Phones();
                this.collection.fetch({
                    success:function(){
                        console.log('json loaded');
                        self.render();
                    }
                });
            },
            template: Handlebars.compile('<li>sdsadsadsadsad {{name}} dsfcdfd</li>'),
            render:function(){
                var foo = this.collection.toJSON();
                $(this.el).html(this.template(foo));
                return this;
            }
        })
        var phonesView = new PhonesView();
    </script>

Answer 1

使用Handlebars，集合模板如下所示：

{{#items}} <li>  {{name}} </li> {{/items}}

您还需要将集合JSON包装在items对象中，以便Handlebars模板可以像上面那样引用它：

var foo = { items: this.collection.toJSON() };

修改

实际上还有一个问题...... collection.toJSON()没有将每个模型转换为JSON。所以你需要写：

this.collection.models.map(function(x) { return x.toJSON(); });

Fiddle Demo

Answer 2

在你看来：

'initialize': function() {
    this.template = _.template('<p><% model.text $></p>');
    this.collection.fetch({error: function() { console.log(arguments); }, 'success': _.bind(this.onFetch,this) });
    return this;
},
'onFetch': function(collection) {
    this.collection.on("add", this.onAdd, this);          
    this.collection.each( _.bind(this.onAdd, this) );
    return this;
},
'onAdd': function(model){    
    //do something like:
    this.$el.find('.items').append(this.template({model: model}) ) 
);

Answer 3

回答你明确的问题，为什么你只得到一个空的李。您必须向模板发送一些名称数据。例如：

render:function(){
    var firstModel = this.collection.at(0);
    var firstName = firstModel.get("name");
    $(this.el).html(this.template({name: firstName}));
    return this;
}

当然，上面的代码只是为了理解缺少什么，而不是如何实现骨干应用程序。我真的建议你浏览一下Backbone网站上链接的带注释的TODO示例，并了解在那里实现的基本模式。

根据您的评论更新：
解决这个问题的不同方法。建议阅读：http://backbonejs.org/docs/todos.html

继续解决这个问题的“hacky路径”，这样你就能看到一些东西：

addOne: function(phone) {
    this.$el.append(this.template(phone.toJSON()));
    return this;
},

render: function() {
    this.$el.html(); //clear everything in the view
    this.collection.forEach(_.bind(this.addOne,this)); //Will call addOne for every model in the collection.
    return this;
}

backbonejs初学者问题 - 获取和显示json数据

3 个答案: