All geek questions in one place

A basic base application, is this the way it should be done?

Hope you can take a quick look at what I'm doing here. Essentially am I doing this right?

Live demo here too: http://littlejim.co.uk/code/backbone/messing-around/

I just wanted to get a solid understanding in Backbone before I was too wild. Thus, this is a simple demonstration of creating a collection from a JSON object, passing it into a view, and handling simple events. But am I coming to this rule? What can I do better?

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Showing a simple view with events</title> <script type="text/javascript" src="../../media/scripts/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="../../media/scripts/underscore-min.js"></script> <script type="text/javascript" src="../../media/scripts/backbone-min.js"></script> <script type="text/javascript" src="application.js"></script> </head> <body> <header> <h1>Showing views from a collection and basic events</h1> <p>The list below is made from JSON, passed to the view as a collection and has basic events</p> </header> <article> </article> </body> </html>

Here is the JavaScript I have. I just need to know if I will do it right?

 window.App = { // namespaces Controller: {}, Model : {}, Collection : {}, View : {}, // code that starts when the app is first fired initialize : function () { var collection = new App.Collection.Inputs([ {title: "Item 1"}, {title: "Item 2"}, {title: "Item 3"} ]); var view = new App.View.InputSet({collection: collection}); $('article').html(view.render().el); } } /* Collection: Inputs */ App.Collection.Inputs = Backbone.Collection.extend(); /* View: _Input */ App.View._Input = Backbone.View.extend({ events: { "click a": "close" }, // called as soon as a view instance is made initialize: function() { // this makes the render, clear etc available at this // if not setting this, both render() and clear() method will not have themselves in this _.bindAll(this, "render", "close"); }, // backbone required method, which renders the UI render: function() { // this is using underscore templating, which can be passed context $(this.el).html(_.template('<p><%=title%> <a href="#">[close]</a></p>', this.model.toJSON())); return this; }, close: function() { // removes the UI element from the page $(this.el).fadeOut(300); return false; // don't want click to actually happen } }); /* View: InputSet, uses _Input */ App.View.InputSet = Backbone.View.extend({ events: { 'click a': 'clear' }, initialize: function() { // this makes the render, clear etc available at this // if not setting this, both render() and clear() method will not have themselves in this _.bindAll(this, "render"); }, // backbone required method, which renders the UI render: function() { var that = this; views = this.collection.map(function(model) { var view = new App.View._Input({model: model}); $(that.el).append(view.render().el); return view; }); $(that.el).append('<a href="#">[clear]</a>'); return this; }, clear: function() { $(this.el).find('p').fadeOut(300); } }); // wait for the dom to load $(document).ready(function() { // this isn't backbone. this is running our earlier defined initialize in App App.initialize(); });
+4
source share
2 answers

It looks good to me. However, I found that everything can become complicated if you start doing non-trivial things: complex views, nested collections, etc.

One thing that can be done differently is that instead of generating input views using collection.map you can bind the add collection event to a function that instead generates the _Input for this element in the collection. So in your InputSet view you will have something like this:

 initialize: function() { _.bindAll(this, "addInput", "removeInput"); this.collection.bind("add", this.addInput); this.collection.bind("remove", this.removeInput); } addInput: function(model) { var view = new App.View._Input({model: model}); $(this.el).append(view.render().el); }
+2
source

I look at me well - really the only thing I would suggest is to bind the 'change' collection event to _Input.render so that changes in your collection automatically redraw the view:

 // called as soon as a view instance is made initialize: function() { _.bindAll(this, "render", "close"); this.collection.bind('change', this.render); },

Also, I think it looks good!

0
source

Source: https://habr.com/ru/post/1345614/

More articles:


All Articles