Dynamically render partial templates using mustache - javascript

Is there a way to dynamically inject partial templates (and have it work the same way in both Ruby & Javascript)? Basically, I'm trying to render different types of objects in a list.
The best I can come up with is this:
<div class="items">
{{#items}}
<div class="item">
{{#is_message}}
{{> message}}
{{/is_message}}
{{#is_picture}}
{{> picture}}
{{/is_picture}}
</div>
{{/items}}
</div>
I'm not super-psyched about this approach.
Is there a better way?
Also note that the different types of models for the views can have non-similar fields. I suppose I could always go to the lowest common denominator and have the data hash contain the html, however I would rather use the mustache templates.

I did the same thing you did, and for each property type i needed a dynamic partial, I just set a dynamic variable in the js data model that's being rendered in the template...
eval("this.set({is_" + this.get("propertyType") + ": true})")
or
this["is_" + propertyType] = true
At least I don't have to manually set the 'is_whatever' variable...
It would be cool if mustache.js or ICanHaz.js had some clever syntax for dynamic properties inside of mustache tags... maybe something like this:
{{>{{message}} }}

Related

AngularJS: how to optimize nested directives

I have the following template for directive item in angular. Item contains property type in it's scope. Based on this type I need to render different template.
<item ng-repeat="myItem in items track by myItem.id">
<div ng-switch="::myItem.type">
<div ng-switch-when="type1">
Some complex html with a couple of ng-if and ng-include
</div>
<div ng-switch-when="type2">
Some complex html with a couple of ng-if and ng-include
</div>
<div ng-switch-when="type3">
Some complex html with a couple of ng-if and ng-include
</div>
<div ng-switch-when="type4">
Some complex html with a couple of ng-if and ng-include
</div>
<div ng-switch-when="type5">
Some complex html with a couple of ng-if and ng-include
</div>
<div ng-switch-when="type6">
Some complex html with a couple of ng-if and ng-include
</div>
</div>
</item>
I'd like to rework every ng-switch-when in the standalone directive, and improve performance of ng-repeat (right now it has to make ng-include and set innerHTML for every item and it's a heavy operation for the browser even for list of 50 items).
So my questions are:
how to rework ng-switch-when into standalone directives
how to improve performance of the ng-repeat in this case
Update:
The question related to the AngularJS: Parse HTML events in timeline it's one the reasons why I would like to optimize current structure.
added missed track by
a lot of ng-if and ng-include statements is needed because every widget that represented by ng-switch-when has it's own logic and will be rendered based on some other parameters of myItem.
The problem also that I need to fully rebuild this list of item by some user action.
BTW:
In react I can do something like:
render: function() {
//it's for two items, but can be extended for any number of templates
var child = this.props.type === 'Type A' ? <TemplateA /> : <TemplateB />;
return child;
}
I don't know why you need a lot of IF statements, and why you want use directives for that, but i can help you with advice for ng-repeat.
Use track by $index in ng-repeat to improve performance. And check articles about Angular performance, like this: 11 Tips to Improve AngularJS Performance
Also, if you have interface with a lot of elements which need to render, may be you should look in ReactJS which is faster for rendering.

Passing parameters to helper in Meteor's dynamic templates

I realise that this has been brought up before, and that Template.dynamic isn't designed to take in a parameter if its template parameter is a helper.
But here is what I would like to do:
// a global helper that composites the template's name using domain-specific and global parameters
Template.registerHelper('templateName', function (name) {
return name + Session.get('someVariable');
});
<!-- use case: a template calling two dynamic ones -->
<template name="someTemplate">
<div class="some-class">
{{> Template.dynamic template=templateName 'title' }}
</div>
<div class="another-class">
{{> Template.dynamic template=templateName 'content' }}
</div>
</template>
This pattern is extremely DRY and it avoids having to set up nested conditionals and rewrite quasi-identical templates each with minimal changes.
Right now, I've got this:
Template.registerHelper('templateName', function () {
var dt = this.dName || Template.parentData().dName;
return dName + Session.get('someVariable'));
});
<template name="someTemplate">
{{> segment dName="title"}}
{{> segment dName="content"}}
</template>
<template name="segment">
<div class="some-class">
{{> Template.dynamic template=templateName }}
</div>
</template>
It works, but it isn't ideal, because;
confusion-prone need to include the parameter for the dynamic template's name in the parent template's call
only ever being allowed one Template.dynamic per template due to one parameter, leading to scalability issues
putting the dName parameter in the template's data context is mixed in with local data, requiring the hacky check whether it's accessible in the current one or the parent's
any further complexity in the DOM requires lots of nested conditionals for parameters or many slightly different static templates, leading to bloat
Are there plans to add this functionality? Am I going about this the wrong way? Did anyone else run into these issues?
Thanks for reading.
There is a trick to doing this with {{with}}. See here:
https://forums.meteor.com/t/pass-argument-to-helper-in-template-dynamic-call/3971

Angular JS Directive

I need create a directive in Angular JS to paginate a list of objects. But, I want have the control over how the list will be looks like. Something like that, like JSF dataTable componente:
<ng-page list="lista" var="item">
<!-- this part keeps in original document -->
item.name + item.value
<!-- controllers to navigate between the pages, this part is in a template -->
</ng-page>
So the ideia is create a template of pagination, but how the data will be displayed keeps in the document where the table really are. I don't know if I make me understand.

How to use a template with textboxes loaded with data passed from a calling template in ember.js

I'm trying to make a addstudent template which can be rendered with data if clicked on editstudent option from another template.
I don't want to make different templates for addStudentDetails and EditstudentDetails. how to create a single template for this both functions.
can anyone help me with this?
I see a couple ways of doing this.
Handlebar template, using conditionals.
Then in your controller you can control whether you want to edit or add.
The ember guide has a good example of this for controlling state.
Or you can use Routes and Resources. Possibly a Parent Resource called Student and then routes called edit and add. But you said you didn't want to use different templates so I'm assuming you'll probably want to use #1.
//inside your controller
App.StudentController = Ember.ObjectController.extend({
editStudent: true // or false
});
<!-- handlebars template possibly called studentTemplate -->
{{#if editStudent}}
<!-- code for editStudent -->
{{else}}
<!-- code for addStudent -->
{{/if}}
Hope that answers your question.

Bind tag name in AngularJs

I want to bind tag name to variable in AngularJs. Direct way doesn't work:
<div ng-app ng-init="list=['pre', 'div', 'em']">
Check the list: {{list}}
<div data-ng-repeat="item in list">
{{item}}: <{{item}}>content</{{item}}>
</div>
</div>
How to do it right?
​
You're going to want to make a Directive and use the $compile service module.
Angular template system works on DOM tree, not on strings, so template must be valid HTML and usage of {{}} for tagname is impossible. We can write own directive for it (see Max answer) or if here is small set of options it can be more easy to use ng-include and set of templates for options.

Categories