Question

我尝试this教程。

HTML是（ index.html ）：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery.js"></script>
    <script src="json2.min.js"></script>
    <script src="underscore.js"></script>
    <script src="backbone.js"></script>
    <script>

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

            var ProfileList = Backbone.Collection.extend({
                model: Profile,
                url: 'jsonSample.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>

jsonSample.json：

{
    {
        "name" : "AAAA",
        "title" : "BBBB",
        "background" : "CCCC"
    },
    {
        "name" : "DDDD",
        "title" : "EEEE",
        "background" : "FFFF"
    },
    {
        "name" : "GGGG",
        "title" : "HHHH",
        "background" : "IIII"
    }
}

但浏览器上没有显示任何内容。这有什么不对？

Answer 1

编辑2：

以下是工作版本的jsFiddle：http://jsfiddle.net/8RP89/1/

我建议你寻找一个不同的教程。这个看起来真的很糟糕，我不得不做一些改变才能让事情发生。我不会将我的示例用作未来代码的模板。我做了足够的工作以确保它有效。

我没有测试的一件事实际上是加载了JSON文件。不知道如何在jsFiddle中这样做。

以下是我所做更改的快速概述：

首先，我认为reset事件不再在fetch上调用，除非你特别要求在fetch上调用reset：

profiles.bind('reset', function () {
    profilesView.render();
});

相反，最好在初始化期间在视图中监听add事件。例如：

initialize: function(){
    this.listenTo(this.collection,"add", this.renderItem);          
},

现在，因为为每个添加的项目调用add事件，您需要添加方法来单独呈现项目

renderItem: function(profile) {
     var profileTemplate = this.template(profile.toJSON());
     this.$el.append(profileTemplate);        
}

如果集合中已有元素，则上述操作无效，因此您需要添加渲染方法来处理现有集合元素：

render: function () {
    this.collection.each(function(model){
         var profileTemplate = this.template(model.toJSON());
         this.$el.append(profileTemplate);
    }, this);        
    return this;
},

现在，您必须在创建视图后显式调用render：

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

编辑1：

您可能希望更改这两行以使用集合而不是模型。默认情况下，可以使用this.collection在Backbone Views中访问集合对象。教程中的语法看起来完全错误。我以前从未见过this.model.models。也许这是Backbone的旧版本。

var profilesView = new ProfileView({ collection: profiles });

这一行：

_.each(this.collection, function (profile) {

您所拥有的代码显示：

_.each(this.model.models, function (profile) {

和

var profilesView = new ProfileView({ model: profiles });

我可能会更改你的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"
    }
]

一个简单的例子 - Backbone.js教程 - 基于JSON + View的集合

1 个答案: