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
Related
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.
I have a header with some login/signup forms that popup when you click the respective buttons.
While it was working fine using just jQuery, I've now started to integrate Ember into the application and I'm running into some trouble with some simple toggle functionality.
Here's the basic HTML markup:
<header>
<h1>Page Title<h1>
<nav>
<a id="toggles-login" class="button {{active_class_binding}}">Login</a>
<a id="toggles-signup" class="button {{active_class_binding}}">Signup</a>
</nav>
<div id="popup-forms">
<div id="login-form"></div>
<div id="signup-form"></div>
</div>
<header>
I'm completely new to Ember and I really have no idea how to set this up. The only thing I want is to be able to set the popup forms up as Ember.View objects and toggle them with some action helpers.
I really am lost on this one.
A simple solution would be to trigger simple actions to show the respective forms:
<a id="toggles-login" class="button {{active_class_binding}}" {{action showLoginForm target="view"}}>Login</a>
<a id="toggles-signup" class="button {{active_class_binding}}" {{action showSignupForm target="view"}}>Signup</a>
The corresponding view would have to implement both actions:
App.YourView = Ember.View.extend({
showLoginForm : function(){
this.$("#login-form").toggle();
},
showSignupForm : function(){
this.$("#signup-form").toggle();
}
});
I am having a bit of trouble with ember.js.
I have the following code which properly calls the event in the router to create the notebook. However, it will not pass the notebook context, it it undefined. I have been searching for hours to try and find a solution for this.
I found this and this, which are helpful but I'm not completely sure I'm on the right track. Am I missing something?
Route
App.NotebooksNewRoute = Ember.Route.extend
model: ->
App.Notebook.createRecord()
events:
create: (notebook) ->
#persist notebook
Form
{{#with content}}
<form {{action create content on="submit" }} >
<div>
{{view Ember.TextField placeholder="Enter a title" valueBinding="title" }}
</div>
<div>
{{view Ember.TextArea placeholder="Notes" valueBinding="description" }}
</div>
<button type="submit">Create</button>
</form>
{{/with}}
Am I missing something?
Change {{action create content on="submit" }} to {{action create this on="submit" }}
Why?
When you use the handlebars helper {{#with}}, the enclosed block will be rendered in the context of the specified variable. So after {{#with content}}, this is whatever content was and you can access properties like title and description directly instead of content.title and content.description
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>
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.