Question

我想使用骨干脚本显示来自JSON的数据。

这是html Page：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="backbone.js"></script>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){


var Profile = Backbone.Model.extend();
var ProfileList = Backbone.Collection.extend({
    model: Profile,
    url: 'document.json'
});

var ProfileView = Backbone.View.extend({
    el: "#profiles",
    template: _.template($('#profileTemplate').html()),
    initialize: function(){
        this.listenTo(this.collection,"add", this.renderItem);          
    },
    render: function () {
        this.collection.each(function(model){
             var profileTemplate = this.template(model.toJSON());
             this.$el.append(profileTemplate);
        }, this);        
        return this;
    },
    renderItem: function(profile) {
         var profileTemplate = this.template(profile.toJSON());
         this.$el.append(profileTemplate);        
    }


});

var profileList = new ProfileList();
var profilesView = new ProfileView({ collection: profileList });
profilesView.render();



});
</script>

</head>
<body>

<div id="profiles"></div>

<script id="profileTemplate" type="text/template">
<div class="profile">
        <div class="info">
            <div class="name">
                <%= name %>
            </div>
            <div class="title">
                <%= title %>
            </div>
            <div class="background">
                <%= background %>
            </div>
        </div>
    </div>
                <br />
</script>

</body>
</html>

这是我的json数据： document.json

[
{
    "id": "p1",        
    "name" : "AAAA",
    "title" : "BBBB",
    "background" : "CCCC"
},
{
    "id": "p2",
    "name" : "DDDD",
    "title" : "EEEE",
    "background" : "FFFF"
},
{
    "id": "p3",        
    "name" : "GGGG",
    "title" : "HHHH",
    "background" : "IIII"
}
]

页面上没有显示任何内容我错过了什么吗？我一直在尝试在指定的HTML中的div元素上打印JSON数据。但没有显示任何东西。我尝试调试代码，我可以在jquery中 document.ready 内的 Backbone.Model.extend 之前插入警告语句。但是当我在其中加入警告声明时，它就不会出现。因此， Backbone.Model.extend 中的代码必须在某处出错。有人帮帮我吗？

Answer 1

你需要检查加载你的脚本的顺序，jquery应该是第一个，然后是下划线（因为你使用的是unexcore.js模板）然后是主干：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>

如果这不能解决您的问题，那么您可以尝试向初始数据集发送静态引用，然后根据需要调用fetch（）以获取更多数据，或者您可以显式调用fetch，如下所示：

var profileList = new ProfileList();    
var profilesView = new ProfileView({collection: profileList});
profileList.fetch();
profileList.bind('reset', function () {
   profilesView.render();
});

Working Demo

Answer 2

您应该按顺序加载脚本，jquery，下划线然后Backbone

从外部JSON读取的骨干脚本

2 个答案: