Question

我使用以下代码将json数据从集合加载到视图中。我如何通过集合将服务器中的json数据加载到视图中，我试过如下

将定义的json数据加载到视图中的代码（It Works）

// Person Model
var Person = Backbone.Model.extend({
    defaults: {
        name: 'Guest User',
        age: 30,
        occupation: 'worker'
    }
});

// A List of People
var PeopleCollection = Backbone.Collection.extend({
    model: Person
});


// View for all people
var PeopleView = Backbone.View.extend({
    tagName: 'ul',

    render: function() {
        this.collection.each(function(person) {
            var personView = new PersonView({ model: person });
            this.$el.append(personView.render().el);
        }, this);

        return this;
    }
});

// The View for a Person
var PersonView = Backbone.View.extend({
    tagName: 'li',


    template: _.template($('#personTemplate').html() ),

    render: function() {
        this.$el.html( this.template(this.model.toJSON()) );
        return this;
    }
});

var peopleCollection = new PeopleCollection([
    {
        name: 'Mohit Jain',
        age: 26
    },
    {
        name: 'Taroon Tyagi',
        age: 25,
        occupation: 'web designer'
    },
    {
        name: 'Rahul Narang',
        age: 26,
        occupation: 'Java Developer'
    }
]);

var peopleView = new PeopleView({ collection: peopleCollection });
$(document.body).append(peopleView.render().el);

将服务器json数据加载到视图中的代码（Not Works）

 // Person Model
var Person = Backbone.Model.extend();

// A List of People
var PeopleCollection = Backbone.Collection.extend({
    model: Person,
    url: "test.json"
});

var Peoples = new PeopleCollection();

// View for all people
var PeopleView = Backbone.View.extend({
    tagName: 'ul',
    collection: Peoples,
    render: function() {
        this.collection.fetch();
        this.collection.each(function(person) {
            var personView = new PersonView({ model: person });
            this.$el.append(personView.render().el);
        }, this);

        return this;
    }
});

// The View for a Person
var PersonView = Backbone.View.extend({
    tagName: 'li',


    template: _.template($('#personTemplate').html() ),

    render: function() {
        this.$el.html( this.template(this.model.toJSON()) );
        return this;
    }
});

var Peoples = new PeopleCollection();

var peopleView = new PeopleView();
$(document.body).append(peopleView.render().el);

test.json

[{name: 'Mohit Jain',age: 26},{name: 'Taroon Tyagi',age: 25,occupation: 'web designer'},{name: 'Rahul Narang',age: 26,occupation: 'Java Developer'}]

HTML

<script id="personTemplate" type="text/template">
    <strong><%= name %></strong> (<%= age %>) - <%= occupation %>
</script>

如果我没有遵循任何骨干标准来将集合渲染到视图中，请指导我

Answer 1

var Peoples = new PeopleCollection();

Peoples.fetch(); // <-- you're missing this

var peopleView = new PeopleView({ collection: Peoples });

您需要在显示之前获取该集合。

此外，您需要侦听集合的更改并重新呈现视图：

var PeopleView = Backbone.View.extend({
   initialize: function(){
     this.listenTo(this.collection, "sync", this.render);
   },
   // same code as before
});

最后，渲染代码不应该获取集合，但它应该将结果放在DOM中（以便在集合更改时用户看到的内容会刷新）：

render: function(){
    // REMOVE THIS !
    //this.collection.fetch();
    this.collection.each(function(person) {
        var personView = new PersonView({ model: person });
        this.$el.append(personView.render().el);
    }, this);

    $("#people-container").html(this.el);
}

当然，要使上面的代码工作，你需要一个id为“people-container”的页面元素，例如：

<div id="people-container"></div>

Answer 2

当您以this.collection.fetch();的方式调用它时，它会异步加载来自服务器的数据，因此当您渲染视图时，您的数据尚未加载。

尝试将视图的呈现链接到数据加载，如下所示：

var PeopleView = Backbone.View.extend({
tagName: 'ul',
collection: Peoples,
initialize: function() {
    this.listenTo(this.collection, "reset", this.render);
},
render: function() {
    // this.collection.fetch(); => no needs for this
    this.collection.each(function(person) {
        var personView = new PersonView({ model: person });
        this.$el.append(personView.render().el);
    }, this);

    return this;
}
});

将集合中的服务器数据加载到视图中不适用于主干js

2 个答案: