Question

我想为下面的混乱道歉 - 对以下代码有些困难。试图通过集合视图显示每个模型视图，而不需要简洁。任何帮助将不胜感激。提示和指针也是如此。提前谢谢。

$(function() {

/* Model */
var Publication = Backbone.Model.extend({
    defaults: {
        title: "",
        published: ""
    }
});

/* Collection */
var PublicationCollection = Backbone.Collection.extend({
    model: Publication,
    url: 'http://www.stellarbiotechnologies.com/media/press-releases/json'
});

/* Model View */
var PublicationView = Backbone.View.extend({
    tagName: 'li',
    className: 'publication',
    el: 'displayHere',
    template: _.template($('#publicationTemplate').html()),

    initialize: function() {
        this.model.on('destroy', this.remove, this);
    },

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

/* Collection View */
var AppView = Backbone.View.extend({
    tagName: 'ul',

    initialize: function() {

        var pubs = this.collection;
        pubs.fetch;
        pubs.bind('reset', this.render);
        pubs.bind('add', this.add, this);
        pubs.bind('remove', this.remove, this);    
    },

    render : function() {
        this.collection.each(this.add, this);
        return this;
    },

    add: function(pub) {
        var pub = new PublicationView({model: Publication});
        this.$el.html(pub.render().el);
    },    

    remove: function(pub) {
        var pubs = this.collection;
        pubs.remove(pub);
        pubs.render();
    },

});

var App = new AppView({collection: PublicationCollection});

});

HTML：

<body>
<ul id="displayHere"></ul>
</body>

模板：

<script id="publicationTemplate" type="text/template">
<td class="id"><%= id %></td>
<td class="title"><%= title %></td>
<td class="published"><%= published %></td>
</script>

Answer 1

我们走了

!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="UTF-8">
    <title>Help 7</title>
</head>
<body>
    <ul id="displayHere"></ul>
    <script id="publicationTemplate" type="text/template">
    <td class="title"><%= title %></td>
    <td class="published"><%= published %></td>
    </script>


<script src="js/jquery.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script>
$(function() {
/* The initialization of the models is correct, according to data json page you supply */
/* Model */
var Publication = Backbone.Model.extend({
    defaults: {
        title: "",
        published: ""
    }
});
/* They need to manipulate the data received since apparently come masked in the variable "news", this variable contains the main array with which it is     going to work. */
/* Collection */
var PublicationCollection = Backbone.Collection.extend({
    model: Publication,
    url: 'http://www.stellarbiotechnologies.com/media/press-releases/json',
    /*
    for this we will use the "parse" function that provides us backbone, which performs this function is handled in the manner in which the data received     before storing in the collection needed
    */
    parse: function(response){
        return response.news;
    }
});
/*
Here you must not set the item as "#displayHere"
*/
/* Model View */
var PublicationView = Backbone.View.extend({
    tagName: 'li',
    className: 'publication',
    template: _.template($('#publicationTemplate').html()),

    initialize: function() {
        this.model.on('destroy', this.remove, this);
    },

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

/* Collection View */
var AppView = Backbone.View.extend({
    /*
    this is where you establish your main item as "#displayHere"
    */
    el: '#displayHere',
    /*
    Here is a somewhat tricky part when receiving data from somewhere, and     it takes establish the way in which they will work and much depends on your     project, then what we'll do is add a listener to the collection, this means that     when you run the "fetch" this will execute the "sync" event which is to be this     outstanding.
    */
    initialize: function() {
        this.listenTo(this.collection, "sync", this.render);
    },

    render : function() {
        this.collection.each(this.add, this);
        return this;
    },

    add: function(newModel) {
        var pub = new PublicationView({model: newModel});
        this.$el.append(pub.render().el);
    },    
    /* Remove is not used until now */
    remove: function(pub) {
        var pubs = this.collection;
        pubs.remove(pub);
        pubs.render();
    }

});
/*
First we have to create a collection, you can not just send the constructor     PublicationCollection
*/
var AppPublicationCollection = new PublicationCollection();
/*
And created the collection, then we can send it
*/
var App = new AppView({collection: AppPublicationCollection});
/*
And finally we have to run the "fetch" function to send for data
*/
AppPublicationCollection.fetch();

});
</script>
</body>
</html>

Backbone.js通过模型视图收集视图

1 个答案: