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/>
Related
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').
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}}>
I'm editing an object with a form and want to save the changed object from within the controller-action which is bound to the submit-button. I don't want to bind the values directly to the template.
Here's the admin/edit.hbs
<form>
<label>Title
<input name="title" type="text" {{ bind-attr value=title }} />
</label>
<label>Permalink
<input name="permalink" type="text" {{ bind-attr value=permalink }} />
</label>
<label>Post
{{textarea value=body cols="80" rows="12"}}
</label>
<button {{ action 'submitAction' }}>Submit</button>
</form>
This is the controller admin/edit.hbs
import Ember from 'ember';
export default Ember.ObjectController.extend({
actions: {
submitAction: function() {
var newTitle = this.get('title');
// how to access the model here?
}
}
});
Assuming that the model you want is currently the model of your ObjectController, you can do one of two things:
Get the model directly:
submitAction: function() {
var model = this.get('model');
}
Pass it to the handler in the template:
// admin/edit.hbs
<button {{action 'submitAction' model}}>Submit</button>
// admin/edit.js
submitAction: function(model) {
}
In an ObjectController, the model is stored as… model. You can access it like this:
var model = this.get('model');
model.set('title', newTitle);
If you’re not using the features of ObjectController that automatically bind get and set calls to the object, you probably shouldn’t use ObjectController. The code as you have it listed will be setting the title of your model directly from the input field.
I have a user settings form like so:
<script type="text/x-handlebars" data-template-name="settings">
<form class="form-horizontal user-form" {{action "update" on="submit"}}>
<div>
<label>First Name</label>
{{input type="text" value=firstName placeholder="First Name"}}
{{error.firstName}}
</div>
<div>
<label>Last Name</label>
{{input type="text" value=lastName placeholder="Last Name"}}
{{error.lastName}}
</div>
<div>
<label>Email Address *</label>
{{input type="text" value=email placeholder="Email Address"}}
{{error.email}}
</div>
</form>
</script>
In my route for this page, I define the model:
App.SettingsRoute = Ember.Route.extend({
model: function() {
return this.store.find('user', 1);
}
});
If things are left like this, the form will automatically populate with the values retrieved from the model. However, if I add a controller:
App.SettingsController = Ember.Controller.extend({
actions: {
update: function() {
// Do something
}
}
});
...They won't. So how do I use my model in conjunction with this controller to set the properties?
The way you defined your controller was as a regular Ember.Controller and not an Ember.ObjectController so the controller is not proxying the model. If you modify it to be like this:
App.SettingsController = Ember.ObjectController.extend({
actions: {
update: function() {
// Do something
}
}
});
Then it should still automatically populate with the values from the model.
I have a simple component that looks like this:
<script type="text/x-handlebars" id="components/Gd-text-input">
<label {{bind-attr for="name"}}>
{{label}}
</label>
<input type="text" {{bind-attr name="key" id="name"}} />
</script>
I would like to add the attribute type to the input field, and if no type is passed when including the component, like this for example:
{{Gd-text-input label="First Name" name="firstname" key="entry.810220554" }}
I would like it to default to type="text". How would I go about doing this?
Yep, you can subclass Ember.Component:
YourApp.GdTextInputComponent = Ember.Component.extend({
type: 'text'
});