I've got an arrayController that contains a list of recent search terms. When I push an item to the array it correctly displays the quantity of items on the view except for one problem...I can't get the name to print.
Here's the pertinent code
App.recentUsersArray = Em.ArrayController.create({
content: [],
addUser: function(name) {
this.pushObject(name);
}
});
<ol>
{{#each App.recentUsersArray}}
<li>
{{#view App.RecentNameView}} {{name}} {{/view}}
{{#view App.RecentNameDeleteView}}X{{/view}}
</li>
{{/each}}
</ol>
Inside this line: {{#view App.RecentNameView}} {{/view}} I've tried {{name}}. {{content.name}} but neither work. What am I doing wrong?
Try using "this": http://jsfiddle.net/s7DbE/
Or this, which is answers the question a little better: http://jsfiddle.net/s7DbE/1/
Or this fiddle, which reverses the inputs: http://jsfiddle.net/s7DbE/2/
Related
Say I have the following code:
<div>
{{#each questions}}
<div id="question_{{#index}}">
{{#each this.answers}}
<div id="answer_{{???}}_{{#index}}">
{{this}}
</div>
{{/each}}
</div>
{{/each}
</div>
How can I access the outer loop's index (question index) inside of the inner (answer) loop? Essentially I want the id in the format of "answer_questionIndex_answerIndex"
Found this deep in some documentation
Block Parameters
New in Handlebars 3.0, it's possible to receive named parameters from supporting helpers.
{{#each users as |user userId|}}
Id: {{userId}} Name: {{user.name}}
{{/each}}
In this particular example, user will have the same value as the current context and userId will have the index value for the iteration.
https://handlebarsjs.com/guide/block-helpers.html#hash-arguments
I have successfully displayed JSON objects unto my template thanks the answer on my previous stackoverflow post setting data from route to controller error in Emberjs
Now, I am trying to display a nested JSON data objects to my template using the {{#each}} helper.
here is my code:
http://screencast.com/t/3fhpckr4E
It doesn't give me any errors on my dev console and also it just gives me blank text.
I've also wrote the code in different ways but still no luck..
any feedback would be appreciated
thanks,
You can do this in your template as follows:
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item.description}}</li>
<ul>
{{#each childItem in item.items}}
<li>{{childItem.title}}</li>
{{/each}}
</ul>
{{/each}}
</ul>
</script>
Working solution here
The problem with what you are doing is that there is no such thing as data.items.items. Each item in the data.items array has its own items property...
I have a container view which, among other things, displays a list of objects, like so:
{{#each}}
<div {{bind-attr class="author.first_name task"}}></div>
{{/each}}
I would like to hook a Javascript function everytime a DOM element is added to this list. I've tried doing:
didInsertElement: function() { ... }
But this hook apparently runs only the first time the view is initialized. I figured that maybe the hook doesn't run because the view is actually inserted once, and what's inserted more than once are just the nested element.
So should I use a nested view?
I tried something along these lines:
{{#each}}
{{#view App.SingleItemView}}
<div {{bind-attr class="author.first_name task"}}></div>
{{/view}}
{{/each}}
But in this case, though it works somehow, it doesn't get passed the necessary data that would render the properties such as author.first_name.
render will give you a new scope and is really easy to assign the content as well
<ul>
{{#each item in controller}}
{{render 'ind' item}}
{{/each}}
</ul>
http://emberjs.jsbin.com/alAKubo/1/edit
On the Pages bit of the assemble.io docs, under Using YFM with the page variable, it has this:
<ul>
{{#each pages}}
<li>{{../page.title}}</li>
{{/each}}
</ul>
suggesting this will output the title (from each page's YFM) - if I paste that code into the top of example.hbs from the examples project it just outputs this (and I see the same thing in my own project):
<ul>
<li>Examples</li>
<li>Examples</li>
<li>Examples</li>
<li>Examples</li>
<li>Examples</li>
</ul>
It looks like the documentation has been updated since you posted this question. The correct handlebars code should be...
<ul>
{{#each pages}}
<li>{{title}}</li>
{{/each}}
</ul>
This is saying that for each page in the pages collection, write out an anchor tag that uses the title property on the current page within the loop.
I hope this helps.
The data for each page is exposed via the data object. Updated code below.
<ul>
{{#each pages}}
<li>{{ data.title }}</li>
{{/each}}
</ul>
I am currently rendering a list of views:
<ul>
{{#each newsItem in controller}}
{{view App.NewsItemView contentBinding="newsItem" class="news-item" }}
{{/each}}
</ul>
But I would like to inject a NewsItemController into each view.
I've tried using render, but this only seems to support a single view, giving the exception:
Uncaught Error: Handlebars error: Could not find property 'control'
on object .
I've found a brief mention of using control instead, but this no longer seems to be included.
So how can I render multiple versions of the same view, injecting a separate controller into each one?
{{render}} should be fixed in current master (if you build it from Github). You should be able to use it multiple times if you pass a model:
<ul>
{{#each controller}}
{{render "newsItem" this}}
{{/each}}
</ul>
{{control}} is still there but hidden behind a flag (because it's still experimental). To use it you need to do : ENV.EXPERIMENTAL_CONTROL_HELPER = true before including the ember.js file. If you can avoid using it, it would be better.
However I think the simplest approach would be to use itemController:
<ul>
{{#each controller itemController="newsItem"}}
{{view App.NewsItemView class="news-item" }}
{{/each}}
</ul>
I think you can combine them to make it simpler (I haven't tried it yet):
<ul>
{{each controller itemController="newsItem" itemViewClass="App.NewsItemView"}}
</ul>