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

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -