How to append a dynamic class to a view that already has a static class?
http://jsfiddle.net/MBmUs/4/
We've recently added this functionality to Ember. With a build off master, or after 0.9.6 is released, you can do:
<div {{bindAttr class="App.foo:a-bound-class :a-static-class"}}></div>
With Ember-CLI, you can just render it directly within the class:
{{#each items as |item|}}
<div class="static-class {{item.class}}">
<!-- content -->
</div>
{{/each}}
With HTMLBars this is what works for me:
<div class="{{dynamicAttr}} staticAttr">
<!-- content -->
</div>
Related
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.
I have a problem with my emberjs view. I cannot access to the model defined in the parent view. I have tested with view.parentView.model and this not working
Here is my code :
<div class="allowed_name">{{model.allowed_email_domain}}</div><!-- working -->
{{#each view.content}}
<h1>{{model.allowed_email_domain}}</h1> <!-- not working -->
{{/each}}
Thank's
Ignoring the fact that you are using the view and probably shouldn't be, it's because you've changed the context inside the each loop.
Depending on the version of handlebars/htmlbars you are using
<div class="allowed_name">{{model.allowed_email_domain}}</div><!-- working -->
{{#each view.content as |item|}}
<h1>{{model.allowed_email_domain}}</h1> <!-- working -->
{{/each}}
<div class="allowed_name">{{model.allowed_email_domain}}</div><!-- working -->
{{#each item in view.content}}
<h1>{{model.allowed_email_domain}}</h1> <!-- working -->
{{/each}}
In my ember application I would like to change button depending on if input change. Below is my code that is working fine but that code has redundancy.Is there better way to do it:
html code:
<div {{bind-attr class="isActive:active"}}>
{{#if isActive}}
<button class="primary button" {{ action 'saveData' }}>Save</button>
<button id="btn-cancel-info" class="secondary button">Cancel</button>
{{else}}
<button class="primary button inactive">Save</button>
<button id="btn-cancel-info" class="secondary button">Cancel</button>
{{/if}}
</div>
I am setting the value for isActive in objectController.
You can use the bind-attr helper.
{{bind-attr class="isNotActive:inactive :primary :button"}}
As you can see I added in your other Static classes as well, Below is a link to another question that is about static classes on the bind-attr helper.
Append a dynamic class to a view having a static class
Considering the following:
Parent template:
{{view App.SomeView id="42" panelClass="default"}}
View template:
<div class="col-md-3 col-sm-6">
<div class="panel panel-{{panelClass}}">
<div class="panel-heading">
<h3 class="panel-title">
{{name}}
</h3>
</div>
<div class="panel-body">
{{description}}
</div>
</div>
</div>
View JS:
App.SomeView = Ember.View.extend({
templateName: 'views/some-view'
});
How can I achieve output HTML where the panel class gets set properly? At the moment it doesn't work because it wants to bind, so it inserts the ember metamorph script tags, instead of just plain text for the panel class.
Also, the template is wrapped in an extra div. How would I modify it so that the ember-view wrapping div is actually the first div in the template (the one with col-md-3 col-sm-6)?
The bind-attr helper exists for that reason. Here's the guide entry.
<div {{bind-attr class=":panel panelClass"}}></div>
Also, not sure if you can use a prefix on panelClass in the template. If might be easier just to use a computed property to add the panel- beforehand.
I'm sorry, I didn't see your second question about the extra div. The guide explains here how to extend the element.
App.SomeView = Ember.View.extend({
classNames: ['col-md-3', 'col-sm-6']
});
This is solved since Ember 1.8 with the HTMLBars engine.
I would like to bind a css style in a template. What would be the
solution ?
I tried this:
<div class="bar" style="width:{{barWidth}}px"></div>
but DOM element look like this after its been rendered:
<div class="bar" style="width:<script id='metamorph-28-start' type='text/x-placeholder'></script>5.000000000000002<script
id='metamorph-28-end' type='text/x-placeholder'>px">
Obviously here we can see that the tag for metamorph was
added within the style attribute...
I'm wondering what is the best way to achieve such things with
Ember.js
There is something i don't get yet.
I have a template as follow:
<script type="text/x-handlebars" data-template-name="listTemplate">
<ul id="list">
{{#each App.list}}
<li {{bindAttr data-item-id="itemId"}}>
<div>
<span class="label">{{itemName}}</span>
<div class="barContainer">
<div class="bar" {{bindAttr style="barWidth"}}></div>
<div class="barCap"></div>
</div>
</div>
</li>
{{/each}}
</ul>
i'm in a for each loop that loops thru my ArrayProxy content... and the bar width vary depending of the value of each item in the list. Your solution here will not work as the view is the UL and i need a barWidth per model item. and I do not want to polute my Model with css related things like "width: ###px"
Is there any other elegant way to solve what i try to do ? maybe it would be radically different. I'm very new to ember.js and try to discover the best-practices yet:)
Set a string on your view that looks like "width: 100px" and then bind it to your div with the bind-attr helper like so: <div {{bind-attr style="divStyle"}}>Test</div>
http://jsfiddle.net/tomwhatmore/rearT/1/
To simplify all that, I created a tiny handlebars helper for emberjs that allows you to bind any style properties. You can look at https://github.com/yderidde/bindstyle-ember-helper
Add unbound:
<div class="bar" style="width:{{unbound barWidth}}px"></div>
In Ember 2.0:
<div class="bar" style="width:{{barWidth}}px"></div>
will just work.