Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>IDs are ment to be unique per-document. Don't use them. Instead, use a general-purpose class attribute to identify individual applications and classes (again) inside these instances too point into specific parts of the application.</p> <p>Example HTML:</p> <pre><code>&lt;div class="app"&gt; &lt;a class="start-button" href="#"&gt;button1&lt;/a&gt; &lt;/div&gt; &lt;div class="app"&gt; &lt;a class="start-button" href="#"&gt;button2&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Assuming the above, you can now determine the application in which the start button was clicked:</p> <pre><code>$('.start-button').click(function(event) { var app = $(event.target).closest('.app'); // Do stuff }); </code></pre> <p>Now if you want to do stuff inside that specific application, you can just use the <code>app</code> or some other top reference to keep the changes inside that app only.</p> <p>For instance, hiding the button when clicked:</p> <pre><code>$(app, '.start-button').hide(); </code></pre> <p>For a full running example, see this Fiddle: <a href="http://jsfiddle.net/8Xtue/2/" rel="nofollow">http://jsfiddle.net/8Xtue/2/</a></p> <p>What I'm presenting here is a simple foundation for a JavaScript application framework. If this is the style you are writing your applications, you might want to consider some ready framework like AngularJS (<a href="http://angularjs.org/" rel="nofollow">http://angularjs.org/</a>), which already provides you with a very well thought framework on working this kind of embeddable, JavaScript applications.</p>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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