I am trying to add an ember view using handlebars.js in jade. When I use this code
script(type='text/x-handlebars')
{{view App.LoginView}}
{{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}
it renders it as:
<div id="ember194" class="ember-view"></div>
<input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">
I can't seem to get the textfield to be wrapped within the view. I am wondering if there is a trick to be able to use handlebars correctly within a jade template.
The desired result that I want is:
<div id="ember194" class="ember-view">
<input id="ember204" class="ember-view ember-text-field" placeholder="Enter your username" type="text">
</div>
Try:
script(type='text/x-handlebars')
{{#view App.LoginView}}
{{view Ember.TextField valueBinding="username" placeholder="Enter your username"}}
{{/view}}
Jade saves you from HTML closing tags but the handlebars block must be intact, and what you're asking for requires the Ember.TextField to be inside a {{#view}} block.
[Edit] FYI check out http://emblemjs.com/
Related
In Ember's input helper, how can I show/hide attributes based on a condition? For example, let's say I want to show required="required" if isEditable is true and disabled="disabled" otherwise. Currently I have something like this:
{{#if isEditable}}
{{input value=model.name required="required"}}
{{else}}
{{input value=model.name disabled="disabled"}}
{{/if}}
...but it would be nice if I bind the attributes somehow instead.
{{ input type='text' required=required disabled=disabled }} works just fine
Working example here
There are a whole bunch of attributes that you can bind directly and required and disabled are among the pack. See here
Note #blackmind is correct that if you were to do this from scratch, you would need to do some work. Fortunately though, TextSupport already does the work for you... :) See here
From the EmberJS site
By default, view helpers do not accept data attributes. For example
{{#link-to "photos" data-toggle="dropdown"}}Photos{{/link-to}}
{{input type="text" data-toggle="tooltip" data-placement="bottom" title="Name"}}
renders the following HTML:
<a id="ember239" class="ember-view" href="#/photos">Photos</a>
<input id="ember257" class="ember-view ember-text-field" type="text" title="Name">
There are two ways to enable support for data attributes. One way would be to add an attribute binding on the view, e.g. Ember.LinkView or Ember.TextField for the specific attribute:
Ember.LinkView.reopen({
attributeBindings: ['data-toggle']
});
Ember.TextField.reopen({
attributeBindings: ['data-toggle', 'data-placement']
});
Now the same handlebars code above renders the following HTML:
<a id="ember240" class="ember-view" href="#/photos" data-toggle="dropdown">Photos</a>
<input id="ember259" class="ember-view ember-text-field"
type="text" data-toggle="tooltip" data-placement="bottom" title="Name">
Or you can reopen the view
Ember.View.reopen({
init: function() {
this._super();
var self = this;
// bind attributes beginning with 'data-'
Em.keys(this).forEach(function(key) {
if (key.substr(0, 5) === 'data-') {
self.get('attributeBindings').pushObject(key);
}
});
}
});
I typically do the following
<input type="checkbox" {{bind-attr disabled=isAdministrator}}>
given this code
<div class="form-group">
<label class="control-label" for="stateCode">StateID</label>
{{view Ember.Select
contentBinding="controllers.state.content"
optionValuePath="content.state"
optionLabelPath="content.stateName"
valueBinding="stateCode"
class="form-control"
disabled=isNotEditing
}}
<div class="form-group">
<label class="control-label" for="country">Country</label>
{{input type="text" value=country class="form-control" placeholder="Country" disabled=isNotEditing}}
</div>
the fields all show as disabled. However, when I toggle the isNotEditing property then only the {{input fields are enabled. The {{view Ember.Select field is still disabled.
Is there something else that I need to do to toggle a {{view Ember.Select disabled state ?
thanks
Instead of using disabled, you should used disabledBinding. When you set disabled directly it's the same as statically assigning a single value that does not change (the value of isNotEditing and view instantiation). I'm not sure why using disabled works for inputs but not for selects. It might be a bug with the inputs...
Here's a jsbin : http://jsbin.com/ucanam/968/edit
Using ember 1.0 and handlebars 1.0
I want to present an ember input as disabled until the user presses the edit button. I have managed to get the functionality working at the expense of code duplication.
{{#if isEditing}}
{{input type="text" value=firstName class="form-control" placeholder="First name" }}
{{else}}
{{input type="text" value=firstName class="form-control" placeholder="First name" disabled=""}}
{{/if}}
just wondering if there was a better way ..
thanks
Instead of disabled your input with classes, just add the disabled attribute for your input field
{{input type="text" value=firstName class="input-medium" disabledBinding="disabled"}}
Demo Fiddle
I need to make a bootstrap form with 10 textfield elements.
From the bootstrap doc, I need to have this code for each textfield element:
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
Em.TextField object only manage the
<input type="text...
and I would like to minimize my handlebar form.
What is the best solution to have the expected result with the minimum of code ?
Is there a sample code for this ?
You can create a new view that includes all of the required bootstrap markup and incorporates the built in Ember.TextField input element. The custom TextField has an added label property that sets the text for the form label.
JSBin Example
Custom TextField:
JS:
App.BootstrapTextFieldView = Ember.View.extend({
templateName: 'bootstrapTextField',
inputElement: null
});
Handlebars:
<script type="text/x-handlebars" data-template-name='bootstrapTextField'>
<div class='control-group'>
<label class="control-label" {{bindAttr for='view.inputElement.elementId'}}>{{view.label}}</label>
<div class="controls">
{{view Ember.TextField valueBinding='view.value' viewName="inputElement"}}
</div>
</div>
</script>
Using the new view
You would use it similar to using the normal Ember.TextField:
<form class="form-horizontal">
{{view App.BootstrapTextFieldView valueBinding='textFieldValue' labelBinding='textFieldLabel'}}
</form>
The only tricky part was correctly setting the for='..." property on the <label> since we need to get the auto-generated id of the {{view Ember.TextField ...}}. This can be done by using the viewName property of the {{view ...}} helper. Setting {{view App.theViewHere viewName='desiredViewName' lets us access the instance of Ember.TextField we created and set the for property of the label to the view's id using the {{bindAttr...}} helper.
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