1

我是 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 是异步的，所以我在 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>
4

3 回答 3

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(); });

小提琴演示

于 2012-12-13T19:21:43.153 回答
0

在你看来：

'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}) ) 
);
于 2012-12-13T16:28:44.610 回答
0

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

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 path”，你可以看到一些东西：

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;
}
于 2012-12-13T16:54:39.277 回答