Databases
StackOverflow2013
Postsdbo
POMustache and nested templates
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMustache and nested templates
    text
    copied!<p>I have a tree-like setup, where each node contains its own Mustache template that might be wrapped in a parent node's template.</p> <pre><code>var templates = { secondTmpl: Mustache.compile("&lt;i&gt;Yet another template.. Here's some text: {{text}}&lt;/i&gt; {{date}}"), template: Mustache.compile("&lt;b&gt;{{val}}&lt;/b&gt;&lt;p&gt;{{{outlet}}}&lt;/p&gt;&lt;ul&gt;{{#list}}&lt;li&gt;{{.}} &lt;/li&gt;{{/list}}&lt;/ul&gt; {{test}}") }; var tree = [ { template: "template", data: { val: "yup!!", list: [1,2,3,4,5], test: function() { return new Date(); } }, children: [ { view: "Main", template: "secondTmpl", data: { text: "Some Value", date: function() { return new Date(); } } } ] } ]; function MainView(options) { this.template = options.template; this.data = options.data; this.childViews = options.childViews; this.el = document.createElement("div"); } MainView.prototype.render = function() { View.prototype.render.call(this); this.postRender(); return this; }; MainView.prototype.postRender = function() { this.el.getElementsByTagName("i")[0].style.border = "1px dotted red"; }; function View(options) { this.template = options.template; this.data = options.data; this.childViews = options.childViews; this.el = document.createElement("div"); } View.prototype.render = function(renderChildren) { if(this.childViews) { this.data.outlet = "&lt;div class=\"outlet\"&gt;&lt;/div&gt;"; } this.el.innerHTML = this.template(this.data); if(this.childViews) { this.childViews.forEach(function(view) { this.el.getElementsByClassName("outlet")[0].appendChild(view.render().el); }, this); } return this; }; function traverse(node) { var viewOptions = { template: templates[node.template], data: node.data }; if(node.children) { viewOptions.childViews = node.children.map(function(n) { return traverse(n); }); } return node.view ? new window[node.view + "View"](viewOptions) : new View(viewOptions); } function init() { tree.forEach(function(node) { var view = traverse(node); document.body.appendChild(view.render().el); }); } window.onload = init;​ </code></pre> <p>Example here: <a href="http://jsfiddle.net/b4fTB/" rel="nofollow">http://jsfiddle.net/b4fTB/</a></p> <p>The reason that I have the data in a tree is because the nested templates varies depending on the users data, and because many templates may be wrapped in different templates.</p> <p>I don't know if what I'm doing here is stupid, but it allows me to render the templates from C# as well, which is quite nice.</p> <p>So - the question (comments to the above is of course welcome). When dealing with a template with nested templates, it would be nice to have a simple function that only returns dom elements related to the actual template - and not dom elements from the nested templates. Is this even possible? And is it possible in a way that allows for deeply nested templates and not lose a great deal of performance? In other words, I have two templates where one of them is nested within the other in the jsfiddle. It would be nice not having to worry about nested views in the parent view when dealing with the dom.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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