Databases
StackOverflow2013
Postsdbo
POBackbone basic app, is this how it should be done?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone basic app, is this how it should be done?
    primarykey
    data
    text
    <p>Hope you can have a quick look at what I'm doing here. Essentially, am I doing it right?</p> <p>Live demo of it here too: <a href="http://littlejim.co.uk/code/backbone/messing-around/" rel="nofollow">http://littlejim.co.uk/code/backbone/messing-around/</a></p> <p>I just wanted to get a solid understanding in Backbone before I go too wild. So this is a simple demonstration of creating a collection from a JSON object, passing it to a view and handling simple events. But am I approaching this right? What can I do that's better?</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;Showing a simple view with events&lt;/title&gt; &lt;script type="text/javascript" src="../../media/scripts/jquery-1.5.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../../media/scripts/underscore-min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../../media/scripts/backbone-min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="application.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;Showing views from a collection and basic events&lt;/h1&gt; &lt;p&gt;The list below is made from JSON, passed to the view as a collection and has basic events&lt;/p&gt; &lt;/header&gt; &lt;article&gt; &lt;/article&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is the JavaScript I currently have. I just need to know if I'm approaching this correctly?</p> <pre><code>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('&lt;p&gt;&lt;%=title%&gt; &lt;a href="#"&gt;[close]&lt;/a&gt;&lt;/p&gt;', 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('&lt;a href="#"&gt;[clear]&lt;/a&gt;'); 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(); }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USlittlejim84
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBackbone basic app, is this how it should be done?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBackbone basic app, is this how it should be done?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POBackbone basic app, is this how it should be done?
      1. USsha1dy
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload