Databases
StackOverflow2013
Postsdbo
POGrouping javascript method functionality into a javascript "class"
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGrouping javascript method functionality into a javascript "class"
    primarykey
    data
    text
    <p>Yes, I understand that JavaScript doesn't have "classes" per se, so I'll just throw that out there up front and move on.</p> <p>I have an app that has a left sidebar that lists a bunch of tags. I'm manipulating these tags via JavaScript and AJAX to add, remove, and update the tags.</p> <p>When I currently manipulate the tags, it goes something to the effect of (note this code is a dumbed-down version of what I'm doing, but conveys the point; also, I'm using the jQuery library):</p> <pre><code># HTML page... &lt;div id="tags"&gt; &lt;div class="tag" id="tag_1"&gt;tag text&lt;/div&gt; &lt;div class="tag" id="tag_2"&gt;tag text&lt;/div&gt; &lt;div class="tag" id="tag_3"&gt;tag text&lt;/div&gt; ... &lt;/div&gt; # Javascript to create new tag $("#tags").append("&lt;div class='tag' id='tag_15'&gt;text&lt;/div&gt;") # update a tag $("#tag_10").replace("&lt;div class='tag' id='tag_10'&gt;updated tag&lt;/div&gt;") # remove a tag $("#tag_10").remove() </code></pre> <p>As a side note, I'm using the Rails framework and some of the JS is created on the server via js.erb files and sent back to the client to evaluate. I'm aware of some concerns with servers generating JS, but it's OK in this situation.</p> <p>So I decided that I should group this functionality into a JavaScript "class" that controls the tags on my page.</p> <p>The issue is that I have a single tags sidebar, so I don't need multiple Tag objects...I just need a bunch of named methods that allow me to manipulate the tags on my page in an orderly fashion.</p> <p>I would like to be able to do things like:</p> <pre><code>Tag.append({ text: "tag text", id: &lt;id of tag&gt; }) =&gt; the append functionality above Tag.update(&lt;id to update&gt;, { &lt;hash of options&gt; }) Tag.remove(&lt;id of tag to remove&gt;) </code></pre> <p>I don't understand how I would achieve this functionality with JavaScript.</p> <p>My thoughts are doing something like:</p> <pre><code># "class" definition function Tag() { var methods = { init : function() { ... } append : function(options) { var element = &lt;...build DIV element...&gt;; $("#tags").append(element); } remove : function(domid) { $(domid).remove(); } } } # usage var tag = Tag.new() tag.remove("tag_10") ... </code></pre> <p>However, if I do it this way, will I have to create a new <code>var tag = Tag.new()</code> each time I want to reference the Tag class (since I'm sending some code back via the server)?</p>
    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. USDan L
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POGrouping javascript method functionality into a javascript "class"
      1. This table or related slice is empty.
      1. VTUpMod
    1. COi'm not sure why you need any sort of "class" or "object" encapsulation here, it seems unnecessary and borderline bad practice in this particular instance. if you don't want each tag to be an "object" mirrored in JS i would suggest just making a couple "static" methods (you know like: function appendTag(...) { ... } ) -ck
      singulars
      1. POGrouping javascript method functionality into a javascript "class"
      1. USckozl
    2. COUsing objects as JavaScript namespaces is a common practice and not unnecessary as it allow you to avoid cluttering the global namespace with tons of variables and functions. But when doing so there is no need to create a constructor function, an object literal can directly be created (as suggested in Mitch's answer).
      singulars
      1. POGrouping javascript method functionality into a javascript "class"
      1. USPierre Buyle
    3. CO@ckozl I actually would have thought that having random methods tucked into a JS file would be bad practice and that grouping them into "class-like" functionality would have been a better practice. That's generally how it is in most standard languages. However, I'm very new to writing my own JS like this, so I don't know what best practice would be.
      singulars
      1. POGrouping javascript method functionality into a javascript "class"
      1. USDan L
 

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