Javascript 从外部JSON读取的主干脚本_Javascript_Jquery_Json_Backbone.js

Javascript 从外部JSON读取的主干脚本

javascript jquery json backbone.js

Javascript 从外部JSON读取的主干脚本,javascript,jquery,json,backbone.js,Javascript,Jquery,Json,Backbone.js,我想使用主干脚本显示来自JSON的数据这是html页面： <!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"></

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

这是html页面：

<!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>

页面上没有显示任何内容。
我错过什么了吗？我一直在尝试以指定的HTML将JSON数据打印到div元素上。但是什么也没有展示。我试着调试代码，我可以在jquery中的document.ready中的主干.Model.extend之前插入警报语句。但当我把警告语句放进去的时候，它就不会出现了。因此，Backbone.Model.extend中的代码肯定出了问题。

有人帮帮我吗？

您需要检查加载脚本的顺序，jquery应该排在第一位，下划线排在第二位（因为您使用的是undescore.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>

您应该按顺序加载脚本，jquery、下划线，然后是主干

控制台中有错误吗？请求是否确实发出了？在渲染方法的每个循环中“this”的范围是什么？检查加载脚本的顺序，jquery应该先出现，然后才是主干。@YuryTarabanko我在控制台中没有收到任何错误，我修复了我的问题。这是浏览器问题！不知道为什么它在firefox上工作而不在chrome上工作？最后我更新了代码：

var profileList=new profileList（）；var profilesView=newprofileview（{collection:profileList}）；profileList.fetch（）；bind（'reset'，函数（）{profilesView.render（）；}）更新成功了吗？另外，您是否修改了加载脚本的顺序，即jquery>下划线>主干？我还更改了顺序。这是新代码：我按照您所说的做了，并在上面附加了一个指向新源代码的链接。你能看一下吗？@Aspen你需要把它作为集合的url属性值，比如var ProfileList=Backbone.collection.extend（{model:Profile，url:'jsonSample.json'}）
<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>

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