javascript - Backbone.js Collection View Through Model View -
i'd apologize mess below - having difficulty following code. attempting display each model view through collection view while not succinct required. appreciated. tips , pointers well. thank in advance.
$(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> template:
<script id="publicationtemplate" type="text/template"> <td class="id"><%= id %></td> <td class="title"><%= title %></td> <td class="published"><%= published %></td> </script>
here go
!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() { /* initialization of models correct, according data json page supply */ /* model */ var publication = backbone.model.extend({ defaults: { title: "", published: "" } }); /* need manipulate data received since apparently come masked in variable "news", variable contains main array going work. */ /* collection */ var publicationcollection = backbone.collection.extend({ model: publication, url: 'http://www.stellarbiotechnologies.com/media/press-releases/json', /* use "parse" function provides backbone, performs function handled in manner in data received before storing in collection needed */ parse: function(response){ return response.news; } }); /* here must not set item "#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({ /* establish main item "#displayhere" */ el: '#displayhere', /* here tricky part when receiving data somewhere, , takes establish way in work , depends on project, we'll add listener collection, means when run "fetch" execute "sync" event 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 not used until */ remove: function(pub) { var pubs = this.collection; pubs.remove(pub); pubs.render(); } }); /* first have create collection, can not send constructor publicationcollection */ var apppublicationcollection = new publicationcollection(); /* , created collection, can send */ var app = new appview({collection: apppublicationcollection}); /* , have run "fetch" function send data */ apppublicationcollection.fetch(); }); </script> </body> </html>
Comments
Post a Comment