Backbone从文件中检索集合不起作用

时间:2013-08-28 11:23:28

标签: javascript backbone.js

您好我正在尝试按照tutorial进行操作,因为我正在学习骨干。

但我在浏览器中看到的apache与index.html完全相同,并且没有控制台错误。有人可以指出我做错了什么,或者我错过了什么?

该项目位于/var/www/blog

index.html来源:

<!DOCTYPE html>
<html>
    <head>
        <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>
        <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>-->
        <script>

            $(function() {
                var Profile = Backbone.Model.extend();

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

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

                        return this;
                    }
                });

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

            });
        </script>
        <title>Fortified Studio</title>
    </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>

        </script>
    </body>
</html>

profiles.json来源:

[
    {
        "name": "Chris Brant",
        "title": "Technology Director",
        "background": "With over a decade of web and software engineering experience, Chris ensures that technology decisions support strategic business goals. Chris has led development of successful, award-winning projects as TD at Mekanism and Evolution Bureau (EVB)."  
    },
    {
        "name": "Steve Muller",
        "title": "Executive Producer",
        "background": "With a background in design and film as well as interactive media, Steve has been making successful projects happen for more than a decade, as Director of Biz Dev at Hot Studio, Interactive Producer at Mekanism and EP at Obscura Digital."
    },
    {
        "name": "Dave Cole",
        "title": "Interactive Director",
        "background": "Dave brings 25 years of programming expertise to the development of front-end software. He has implemented award-winning projects for McCann-Erickson, Young &amp; Rubicam, Venables Bell, Mekanism, Freestyle, Razorfish, JumboSHRIMP and EVB."
    },
    {
        "name": "Krister Olsson",
        "title": "Creative Technologist",
        "background": "Krister has received awards for his technical creativity, and his work has appeared in publications like the New York Times, LA Times and Wired. He taught design and programming at CCA, San Francisco Art Institute, and UCLA Design Media Arts."
    },
    {
        "name": "Stella Lai",
        "title": "Creative Director",
        "background": "Stella has been doing UX design and art direction for over 15 years. She has worked on brands like MTV, Absolut, Pepsi, Fiat, Microsoft and Nike. She has received awards from I.D. Magazine, Communication Arts, Clio Awards and One Show, among others."
    },
    {
        "name": "Joel Berghoff",
        "title": "Lead Developer",
        "background": "Joel has been making technical contributions to the web since 1996. He has added his programming expertise to projects for Cisco, Citrix, Autodesk, Gap, Kaiser Permanente, Kettle Chips, Sun Microsystems, Aeris, TV.com, and Clinique among many others."
    }
]

PS。博客目录具有-R 775权限

1 个答案:

答案 0 :(得分:0)

问题是文件的index.html编码。