Databases
StackOverflow2013
Postsdbo
POBackbone sub views/plugins that are aware of when the parent view is loaded
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone sub views/plugins that are aware of when the parent view is loaded
    primarykey
    data
    text
    <p>I'm developing a dynamic form for editing content where I need to be able to add backbone subviews/modules/plugins and bind them to markup rendered from another view. The special thing about this main form/view is that as a third party developer I'm not able to alter this view, so what I need is a loading mechanism for creating instances of sub views in backbone but only when the main view is loaded. I have made a small fiddle that shows what I want to do and in this example the view that contains the checkbox needs to be aware of when the editor view is loaded so I can create an instance of it and bind it to the correct el.</p> <p>Here is the script I'm using</p> <pre><code>// This code cannot be altered by the developer who's creating the module/plugin var EditorView = Backbone.View.extend({ template:_.template($('#tpl-main-view').html()), initialize: function () { }, render: function (eventName) { var html = this.template(); $(this.el).html(html); return this; } }); // This module/plugin needs to be aware of when the editor view is loaded var SubModule = Backbone.View.extend({ events: { 'click input[type=checkbox]' : 'publish' }, publish: function() { alert('publish...'); } }); var Container = Backbone.View.extend({ events: { 'click button' : 'loadView' }, loadView: function() { var view = new EditorView(); $('body').append(view.render().el); } }); var main = new Container({el: $('#container')}); var module = new SubModule({el: $('#sub-view')}); </code></pre> <p>this is the html I'm using in my fiddle</p> <pre><code>&lt;div id="container"&gt; &lt;button&gt;Load&lt;/button&gt; &lt;/div&gt; &lt;script id="tpl-main-view" type="text/template"&gt; &lt;form&gt; &lt;fieldset&gt; &lt;legend&gt;Edit&lt;/legend&gt; &lt;label&gt;Name:&lt;/label&gt; &lt;input type="text" /&gt; &lt;br /&gt; &lt;!-- Sub module start --&gt; &lt;div id="sub-view"&gt; &lt;label&gt;Published&lt;/label&gt; &lt;input type="checkbox" /&gt; &lt;/div&gt; &lt;!-- Sub module end --&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/script&gt; </code></pre> <p><a href="http://jsfiddle.net/UtMeM/2/" rel="nofollow">Fiddle here</a></p> <p>Updated my question with a possible answer but I don't know if this is the best way of solving it. Is it possible to solve this using require js or similar? I think Dojo have some way of determine when other views are loaded.</p> <p>A possible solution: <a href="http://jsfiddle.net/9phHk/1/" rel="nofollow">http://jsfiddle.net/9phHk/1/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMarcus
    1. USMarcus
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBackbone sub views/plugins that are aware of when the parent view is loaded
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POBackbone sub views/plugins that are aware of when the parent view is loaded
      1. This table or related slice is empty.
      1. VTUpMod
    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