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}}>
Related
I want to add data-value attribute in input element:
{{input type="text" data-value=ec.ec_id value=ec.ecl_subject placeholder=ec.ecl_en_subject name="ecl_subject" class="form-control" }}
But its not visible in browser:
<input id="ember874" class="ember-view ember-text-field form-control" placeholder="Doctor4US: Appointment" type="text" name="ecl_subject">
ADDING DATA ATTRIBUTES
By default, view helpers do not accept data attributes
i.e.
{{input type="text" data-value=ec.ec_id value=ec.ecl_subject name="ecl_subject" }}
Render as
<input id="ember257" class="ember-view ember-text-field" type="text" value="12">
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.TextField for the specific attribute:
Ember.TextField.reopen({
attributeBindings: ['data-value']
});
Now the same handlebars code above renders the following HTML:
<input id="ember259" class="ember-view ember-text-field"
type="text" data-value="110" value="12">
You can also automatically bind data attributes on the base view with the following:
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);
}
});
}
});
For more detail reffer:https://guides.emberjs.com/v1.10.0/templates/binding-element-attributes/
Ember Input helpers doesn't allow data-attributes. The list of allowed attributes can be found at https://guides.emberjs.com/v2.6.0/templates/input-helpers/
The solution for problem is that you use html tag itself, when you want to place data-attributes like below
<input type="text" data-value="{{ec.ec_id}}" value="{{ec.ecl_subject}}" placeholder="{{ec.ecl_en_subject}}" name="ecl_subject" class="form-control/>
I'm having trouble trying to get ember and sails playing nice together when it comes to relationships with belongsTo/hasMany.
I have a simple form:
<form {{action 'addMessage' on='submit'}}>
<div class="form-group">
<label for='name'>Title</label>
{{input value=title class="form-control" required="required"}}
</div>
<div class="form-group">
<label for='location'>User</label>
{{input value=user class="form-control" required="required" value=1}}</div>
<p>
<button class="btn btn-primary btn-block" type="submit">Create Message</button>
</p>
And a controller with the action
actions: {
addMessage: function() {
var newMessage = this.store.createRecord('message', {
title: this.get('title'),
user: this.get('user')
});
newMessage.save().then(function() {
}, function(error) {
console.warn('Save Failed.', error);
});
},
I'm just passing a string, and a value which matches a user id. When I look at what's being passed the title is fine, but the user id is null.
I'm using sails ember blueprints so it should work, but think I might be doing something wrong.
I've uploaded the sample code here if someone can take a look https://github.com/jimmyjamieson/ember-sails-example
On your user input is says value=1 which I think is changing what the controller is writing that property as.
so instead of
{{input value=user class="form-control" required="required" value=1}}
try
{{input value=user class="form-control" required="required"}}
Ok, fixed. I've added a repo for others to look at. It works with ember and ember-data 2.0 https://github.com/jimmyjamieson/ember-sails-relationships-hasmany-belongsto-example
I'm running into a weird issue with Ember.js.
I built out a basic search form like so, with an Ember input field that submits to a form action 'submitSearch':
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
submitSearch: function() {
var searchItem = this.get('searchItem');
this.transitionTo({queryParams: {'q':searchItem}});
}
}
});
<div class="search">
<form {{action "submitSearch" on="submit"}}>
<fieldset>
{{input type="text" class="form-control" value=searchItem}}
<input type="submit" name="submit" id="submit-search" class="btn btn-default" value="Search" />
</fieldset>
</form>
</div>
Any reason why I would be getting a value of 'undefined' when logging out searchItem? I've tried just about everything including creating a model, but I can't get the input to save.
The searchTerm value in your template is referring to your controller's searchTerm property, not a property of your route (by default when referring to a property in your template, it is referring to a property of the corresponding controller).
To get the value in the route, simply do this.get('controller.searchTerm').
What I want to do should be fairly simple.
I want to pass variables to partials for reusability.
I want to do something like this :
<form {{action login content on="submit"}}>
<fieldset>
{{partial 'components/field-email' label="Email" fieldname="email" size="full"}}
[...]
</fieldset>
</form>
Instead of doing this :
<form {{action login content on="submit"}}>
<fieldset>
<div {{bind-attr class=":field :email size"}}>
<label {{bind-attr for=fieldname}}>{{label}}</label>
{{input type="email" id=fieldname name=fieldname valueBinding="email" placeholder=label}}
</div>
[...]
</fieldset>
</form>
coming from Rails, I expected this to just work, but it seems I can't (don't know how to) pass variables to a partial. I looked at all the ways to "include a template part":
partial
view
render
The thing that worked for me is using a View. But I thinks it's overkill. I just want separate sub-templates for reusability and readability, no context change or specifying a controller needed here.
Edit:
I also tried to use this partial as a component :
{{field-email type="email" id="email" name="email" valueBinding="email" placeholder=label size="full"}}
Which works for everything except the valueBinding.
I guess it's also worth mentioning that I have a route setup with an action that calls login on my AuthController :
App.LoginRoute = Ember.Route.extend
model: -> Ember.Object.create()
setupController: (controller, model) ->
controller.set 'content', model
controller.set "errorMsg", ""
actions:
login: ->
log.info "Logging in..."
#controllerFor("auth").login #
This whole thing works if all the markup is in the login template but fails if I try to break it up with partials, components and such.
There has to be something that I didn't see...
You should use a component in this case.
If you setup your template correctly (components/field-email), you can use on this way:
{{field-email label="Email" fieldname="email" size="full"}}
You could setup the html component properties, if you define the component. Based on your example, it could be:
App.FieldEmailComponent = Ember.Component.extend({
classNames: ['size'],
classNameBindings: ['email', 'field'],
field: null,
email: null
});
Example: http://emberjs.jsbin.com/hisug/1/edit
Got it working, I had to use a component. I had messed up the "value" part.
components/field-email.hbs :
<div {{bind-attr class=":field :email size"}}>
<label {{bind-attr for=fieldname}}>{{label}}</label>
{{input type="email" name=fieldname value=value placeholder=label}}
</div>
login.hbs :
<form {{action login content on="submit"}}>
<fieldset>
{{field-email label="Email" fieldname="email" value=email size="full"}}
[...]
</fieldset>
</form>
What I get from this is that in order for attributes to be used in a component they have to be explicitly set when using the component. Once they are set, they are bound.
In my case, when the input value changes, the associated route property is updated as well which is pretty cool.
I have a custom view that I've created in Ember. I really love the {{yield}} helper to allow me to control the 'bread' of the sandwich. However, what I'd like to do now, is create a 'double decker' sandwich, and have a view with more than 1 yield in it, or at the very least be able to parameterize which template to use in the 2nd yield.
so for example:
layout.hbs
<div>
<div class="header">Header Content</div>
<div class="tab1">
Tab 1 Controls.
<input type="text" id="common1" />
{{yield}}
</div>
<div class="tab2">
Tab 2 Controls.
<input type="text" id="common2" />
{{yield second-template}} or {{template second-template}}
</div>
</div>
app.js
App.MyDoubleDeckerView = Ember.View.extend({
layoutName:"layout',
templateName:"defaultTemplate",
"second-template":"defaultSecond"
});
App.MyExtendedDoubleDecker = App.MyDoubleDeckerView({
templateName:"myTemplate",
"second-template":"mySecondTemplate"
});
is there any way of doing something like this? What I love about the views in ember is the ability to centralize & extend views which allows me to keep the things that are common among all the views in one place...
As of Ember 3.25 you can use so called "named blocks" (see the Passing multiple blocks subsection of https://api.emberjs.com/ember/release/modules/#glimmer%2Fcomponent).
Example component:
<h1>{{yield to="title"}}</h1>
{{yield}}
and then use it like this:
<PersonProfile #person={{this.currentUser}}>
<:title>{{this.currentUser.name}}</:title>
<:default>{{this.currentUser.siganture}}</:default>
</PersonProfile>
I think you should use named outlets for this
http://emberjs.com/guides/routing/rendering-a-template/
Something like this should work:
layout.hbs
<div>
<div class="header">Header Content</div>
<div class="tab1">
Tab 1 Controls.
<input type="text" id="common1" />
{{yield}}
</div>
<div class="tab2">
Tab 2 Controls.
<input type="text" id="common2" />
{{view "view.secondView"}}
</div>
</div>
app.js
App.MyDoubleDeckerView = Ember.View.extend({
layoutName:"layout',
templateName:"defaultTemplate",
secondView: Ember.view.extend({
templateName: "defaultSecond"
})
});
App.MyExtendedDoubleDecker = App.MyDoubleDeckerView({
templateName:"myTemplate",
secondView: Ember.view.extend({
templateName: "mySecondTemplate"
});
});
In other words, invoke a view given by view.secondView from within your template. Then, set the secondView property in your class or subclass.
You could add a bit of syntactic sugar with
App.viewForTemplateName = function(templateName) {
return Ember.View.extend({
templateName: templateName
});
};
Then, in your view definitions above, do
secondView: App.viewForTemplateName('mySecondTemplate')