How to use the parentView.template in N nested children in EmberJS - javascript

here is what I'm trying to do:
I want to create a tree widget in emberjs that will look like:
{{view UI.TreeView content="App.rootNode"}}
{{name}} //-> content of each node, it could be <img src="{{icon}}" /> {{name}}
{{/view}}
The problem I'm facing is how to use the inner template in my itemViewClass.
Here is what I came up with so far: http://jsfiddle.net/YJ7zM/13/
Relevant line:
template: Em.Handlebars.compile("{{name}} {{view UI.TreeChildrenView contentBinding=\"children\"}}")
That's the line I don't like and would like to replace with something more like:
templateBinding: "parentView.template"
The problem is that "parentView" will only work for the first level of the tree, for the other ones it would be "parentView.parentView.template" and so go.

You could always define the template externally and use templateName...
http://jsfiddle.net/YJ7zM/14/
edit
Revised to address first comment. http://jsfiddle.net/ud3323/mgCva/

Related

Get Angular ngRepeat InnerHTML

I would like to know how to get the Full, Plain HTML of an Angular ngRepeat.
I need it to create reports, alert part of code etc.
I used the $compile and I've been able to get the HTML of simple tags by compiling
<p>I am {{surname}}, {{name}} {{surname}}</p>
and what I got is
<p>I am Bond, James Bond<p>
But when I try to do the same with
<p ng-repeat="number in array">{{number}}</p>
I only get the Angular comment saying
<!-- ngRepeat -->
Instead of the series of paragraphs.
Please check this Fiddle for examples.
In order Angular to compile ngRepeat directive it must be in DOM. Angular finds corresponding comment and replaces it with actual HTML structure.
So all you need to do is to append compiled comment node to DOM and after it's rendered you can retrieve HTML.
$scope.html = $compile('<p ng-repeat="el in arr">{{el}}</p>')($scope);
document.getElementById('app').appendChild($scope.html[0]);
Demo: http://jsfiddle.net/d4p0qLx2/2/
And in the next digest cycle you can get rendered HTML: http://jsfiddle.net/d4p0qLx2/4/

Defining an ID for html element in Emberjs/handlebars fails

I have following issue here:
<ul class="aClass">
{{#if something}}
<li>{{#link-to "blub" bind-attr data-testid=aID}}{{loc "blub"}}{{/link-to}}</li>
{{/if}}
</ul>
so i want to have an element(the link-to is rendered to ...) in the resulting element with the id aId. But the element does not contain the wanted id in the rendered HTML. something like this:
...
any ideas?
In Ember, bind-attr shouldn't be used inside of your link-to help as that should only be used inside of html elements:
<a {{bind-attr href=myLink}}>My Link</a>
Inside of Handlebars helpers, you just define the property directly.
{{#link-to "blub" data-testID="aID"}}{{loc "blub"}}{{/link-to}}
The attribute is not rendered into the HTML if the quotes are missing.
But you also need to reopen the LinkView:
Ember.LinkView.reopen({
attributeBindings: ['data-testID']
});
See similar question here.
And the Ember docs here.
Try using quotes:
{{#link-to "blub" bind-attr data-testid="aID"}}{{loc "blub"}}{{/link-to}}
A lack of quotes will cause Ember to try a property lookup on the current view context, instead of just spitting out a string as you'd like it to.

Ember - how to render a view's property without html

I have an Ember view with the currentUrl property; this property gets the value when the view is called, like this:
{{view App.MyView currentUrl="www.website.com"}}
and in the view's template i have something like this:
<a href="{{view.currentUrl}}">
but this does not work because the output of handlebar expression is:
<script%20id='metamorph-4-start'%20type='text/x-placeholder'></script>www.website.com<script%20id='metamorph-4-end'%20type='text/x-placeholder'></script>
and not only www.website.com as I would like; do you know how can I get an output without the HTML?
Perhaps you can use the {{unbound}} helper here.
<a href="{{unbound view.currentUrl}}">
or the {{bind-attr}} helper
<a {{bind-attr href="view.currentUrl"}}>
depending if you want the property to be live updated (bind-attr) or not (unbound)

Meteor: Re-use template with different data

I've got a few templates which list items (log lines, users) and style them accordingly in tables. Now I've added a "search" page which searches for a string in different item types and displays them on one page. In terms of layout, I want to reuse the original templates, but obviously with the data returned by the search.
How can I do that without duplicating the template itself in the HTML file?
Put another way: How can I use the actual data from the top-level template in the sub-templates.
Small example:
<template name="user_list">
{{#each user_list}}
</template>
<template name="users">
{{> user_list}}
</template>
<template name="search">
{{> user_list}}
{{> group_list}}
</template>
In .coffee:
Template.users.user_list = ->
[a,b,c,d]
Template.search.user_list = ->
[b,c]
Maybe this is an easy one, which would show how little I really understood about Meteor.
Just put the template you want to use inside the {{#each}} statement. Then each item in the array will be the context for that inner template.
HTML file
<template name="users">
<ul>
{{#each UserArr}}
{{> userItem}}
{{/each}}
</ul>
</template>
<template name="userItem">
<li>{{username}} {{profile.name}}</li>
</template>
JS file
Template.users.UserArr = function()
{
return Meteor.users.find({});
};
another solution is to put your request in a Session attribute and check for its existence when querying for the users. By default Session.get("userQuery") would return undefined but once you enter something in the search field you change that with Session.set("userQuery", {type: "something"})
Now in the coffeescript you could say:
Template.users.user_list = ->
if(Session.get("userQuery"))
[a,b,c,d]
else
[b,c]
or alternatively use a MiniMongo query because it is much nicer :-)
the nice thing is that your HTML will rerender because it is reactive to the Session's content.

Dynamically render partial templates using mustache

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}} }}

Categories