Backbone.js Collection View Through Model View

Я хотел бы извиниться за беспорядок внизу - с некоторыми трудностями со следующим кодом. Попытка отобразить представление каждой модели в представлении коллекции, которое не является кратким. Любая помощь будет принята с благодарностью. Советы и указатели. Заранее спасибо.Backbone.js Collection View Through Model View

$(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>

источник

2016-01-27 Adam Gerard

Здесь мы идем

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

источник

2016-01-28 01:09:18 dexhering

Не удается получить эту работу благодаря –

Ах Nevermind он работает отлично спасибо ! –

Backbone.js Collection View Through Model View

ответ

Смежные вопросы