How to get _id value in Meteor template - templates

Here is my template snippet.
{{#if is_multiple_choice _id}}
<div class="row" style="margin-bottom: 20px;">
<div class="input-field col s11">
<select id="ans_{{_id}}" name="answer" class="multiple_choice_answer">
<option value="">No Answer Given for Multiple Choice</option>
{{#each allowed_values}}
{{#if matched value _id}}
<option value="{{value}}" selected>{{value}}</option>
{{else}}
<option value="{{value}}">{{value}}</option>
{{/if}}
{{/each}}
</select>
<label>{{text}}</label>
</div>
</div>
{{/if}}
So I aimed to use _id in "matched" helper, but it seems the _id in matched value _id line gets nothing.
How can I get _id and use it in "matched" helper?
Please help me!!!

Within the {{#each}} {{/each}} loop, you are in a child context
To access the parent context, you need to use the .. notation, like this: ../_id.
You can also use this within a Template.helper to get this._id:
Template.example.helper({
"id": return this._id;
});
You can then use id anywhere in the Template.
Note:
1) this._id is equivalent to Template.instance().data._id within a helper.
Use Template.instance().data to access the template data context within an event, onCreated or onRendered.
2) The .. notation can be used to access the grand-parent template as well, with ../../_id for example.
This .. pattern is acceptable to access parent context from a {{#each}} loop within the same Template for example, but it is not recommended to use with child templates (to access parent template) because your child template is not reusable without the parent template context.

Related

Changing property values from within the component in Ember

I'm wondering how I'd go about dynamically editing a component property from within the component. Code might help you get a bit more clarity on what I'm trying to do.
Templates/boards.hbs
<div>
{{board-component title='Title that wants to be dynamic'}}
</div>
Components/board-component.hbs
{{#if isEditing}}
<div>
<input type="text" value={{title}}>
</div>
{{else}}
<div>
{{title}}
</div>
{{/if}}
Am I right in saying that standard behaviour would have the value I specify in the input reflect as the title, but due to the fact that I've declared the value in the template it reverts back to this declared value?
How can I get around this?
<input type="text" value={{title}}>
It means, board-component title property will get values from boards.hbs. and initially, this will be displayed in the input. but changing input value will not reflect it in title property of the components.
But if you used input helper like below,
{{input type="text" value=title}}
It is two way binding between input value and title property. so whenever you change value from input that will reflect in components.
So answer to your question, use input helper.
{{input type="text" value=title}}

Ember passing multiple list items in template

Is it possible to pass multiple list of items in template using {{each}}
Can someone guide me on what I am doing,
in my sales-orders.hbs below is my currenet code.
{{#each model as |detail|}}
<li>{{sales-orders-grid detail=detail}}</li>
{{else}}
Blank
{{/each}}
</ul>
Then calling the sales-orders-grid component
Shipping Method
<div class="col-xs-12 col-md-12 col-sm-12 products-item-products border-left padding10">
<ul>
{{#each shippingMethod as |sm|}}
{{sales-orders-grid-shipping-method sm=sm}}
{{/each}}
</ul>
</div>
In my sales-orders-grid-shipping-method component calling is this:
sm.shippingMethodName
What I'm trying to achieve here is to pass list of items in {{each}} in my main template. Is it possible?
To change scope you can use the "with" helper.
http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_with
{{#with user.posts as |blogPosts|}}
<div class="notice">
There are {{blogPosts.length}} blog posts written by {{user.name}}.
</div>
{{#each blogPosts as |post|}}
<li>{{post.title}}</li>
{{/each}}
{{/with}}
I think you can nest multiple "with" helper.
I think the way to go is to restructure your data as:model.list1,model.list2,etc.
Then pass the model and use as necessary.And use nested each to acheive the grid.
Iam only posting this as an answer because I can't comment yet.
So, do get back to me for Clarifications.

How to get every value in template which use each

<template name="mytemplate">
{{#each work}}
<div name="adiv">
<input type='hidden' value={{_id}} id="testid"> <br/>
</div>
{{/each}}
</template>
If I use document.getElementById('testid'),It just get the lasted value.But I want to get the every value.
It's because id value is meant to be unique,
change id to class and document.getElementByClassName('testid') will return an array

emberjs - block params for component

If I declare a component like this:
<p>
{{#x-autosuggest source=model destination=tags minChars=0}}
<img src="img/small_avatar.png" title="{{name}}" class="avatar"/>
{{/x-autosuggest}}
</p>
I want the name that field to come from a context I pass using the new block params syntax. I've tried the code sample below but the context is still the context of the controller and not the argument I pass using yield in the component's hbs file.
<ul class='selections'>
{{#each destination as |selection|}}
<li class="selection">
<a class="as-close" {{action "removeSelection" selection}}>x</a>
{{yield selection}}
{{displayHelper selection searchPath}}
</li>
{{/each}}
</ul>
How can pass the selection argument so I can set the name attribute in the original code snippet?
I've recreated a basic example with this jsbin
You need to add as |name| where you're using your component to get the yielded value.
<p>
{{#x-autosuggest source=model destination=tags minChars=0 as |name|}}
<img src="img/small_avatar.png" title="{{name}}" class="avatar"/>
{{/x-autosuggest}}
</p>

How do you bind-attr and action on the same element in handlebars?

Can you actually use two handlebar statements for the same element? for example, I have:
<div class="resultRow" {{action 'didClickResultDefault' this}}>
But I also need to bind an id to it like this:
<div class="resultRow" {{bind-attr id="testID"}}>
Can you do both? If so, how?
Most certainly! What you would do is this:
<div class="resultRow" {{bind-attr id="testID" }}
{{action 'didClickResultDefault' this on='click'}}>
{{testID}}
</div>
Ember allows you to bind attributes and actions to the same element. Here's a JSBIN showing what would happen if you click it.