Question

tenia un ejemplo，pero ya no me sirve como referencia :( estoy buscando como actulizar mi codigo y aprender mas acerca de backbonejs

我正试图从这个json获取信息。

https://coderwall.com/marti1125.json?callback=？

从集合中获取数据是可以的。但是无法在模板中显示数据。

<div id="badges"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>
<script src="js/data.js"></script>

<script id="template" type="text/template">
    <%= badge.name %>
</script>


$(function() {

var Badge = Backbone.Model.extend({});

var BadgeList = Backbone.Collection.extend({
      model: Badge,
      url: 'https://coderwall.com/marti1125.json?callback=?',
             parse: function(response) {                
        return response.badges;
    }
}); 

var viewBadges = Backbone.View.extend({         
    initialize: function(){
            this.template = _.template( $("#template").val());
            },
            render: function () { 
            this.$el.html(this.template({badge: this.model.toJSON()}));
            return this;
            }
});

    var badgeList = new BadgeList();
    var badgeView = new viewBadges({model: badgeList});     
    badgeList.bind('reset', function () {
       $("#badges").append(badgeView.render().$el);
    }); 
   badgeList.fetch();

});

Answer 1

您在进行抓取时必须指定reset：

badgeList.fetch({reset: true});

来自文档：

当模型数据从服务器返回时，它使用set来（智能地）合并获取的模型，除非你传递{reset：true}，在这种情况下集合将被（有效地）重置。

在reset: true旁边，你遗漏了几件事：

创建模板时使用.html()代替.val()

this.template = _.template( $("#template").html());

在自定义解析方法中，您必须返回return response.data.badges;而不是response.badges

请参阅JSFiddle Demo。

使用json backbonejs查看模板中的数据

1 个答案: