I try to use {{input style="width:100%"}} in my view's template but without any success.
Browser stubbornly renders <input> without style="width:100%;".
How can I achieve it?
For future reference, below is my resolution (for Ember-Cli) based on #damienc answer:
Component class
//app/components/forms/elements/style-input.js
import Ember from "ember";
export default Ember.TextField.extend({
attributeBindings: ['style'],
styleAttrib : null,
style: Ember.computed({
get: function () {
return Ember.String.htmlSafe(this.get('styleAttrib'));
},
set: function (key, newStyle) {
this.set('styleAttrib', newStyle);
return Ember.String.htmlSafe(newStyle);
}
})
});
And the template:
{{!app/templates/components/portlet-datatable/header-cell-filterable.hbs}}
<div class="ember-table-content-container">
<span class="ember-table-content">
{{forms/elements/style-input type="text"
placeholder=view.content.headerCellName style="width: 100%;"}}
</span>
</div>
This is not supported out-of-the-box by the input helper.
You could either add a class parameter that matches a CSS rule, or implement your own input helper to add style to your component's attributeBindings attribute.
This old cookbook entry achieves some specific behavior by extending the Ember.TextField class:
http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/focusing_a_textfield_after_its_been_inserted/
Related
I am creating one ember app.
Flow is like " page1 displays list of feeds item and clicking on any of the feed will take user to page2 showing details about that feed"
What i am doing:
i have one component named app-feed. Template is as below
<div onclick={{action 'click' feed}}>
{{#paper-card class="card-small" as |card|}}
<!-- --> {{card.image src=feed.imagePath class="small-feed-img" alt=feed.title}}<!---->
{{#card.header class="flex-box short-padding" as |header|}}
{{#header.avatar}}
<img class="profile-small" src="http://app.com/users/{{feed.userName}}.jpg" alt="{{feed.name}}" />
{{/header.avatar}}
<span class="tag-sm like-box">
{{feed.likes}} {{paper-icon "thumb_up" size="18"}}
{{feed.commentCount}}{{paper-icon "chat_bubble" size="18"}}
</span>
{{/card.header}}
{{#card.actions class="action-block"}}
{{#paper-button iconButton=true}}{{paper-icon "favorite" size="18"}}{{/paper-button}}
{{#paper-button iconButton=true}}{{paper-icon "share" size="18"}}{{/paper-button}}
{{#paper-button iconButton=true}}{{paper-icon "shopping_basket" size="18"}}{{/paper-button}}
{{/card.actions}}
{{/paper-card}}
</div>
component.js is as below
import Ember from 'ember';
export default Ember.Component.extend({
actions:{
click(feed){
console.log("Click event fired:"+feed.id); //Output is correct in console
this.sendAction("onClick", feed); //sending onClick Action
}
}
});
I'm populating list of this component in one of my route.
Template is as below
{{#app-sidenav user=model}}{{/app-sidenav}}
<div class="content">
<div class="row">
{{#each model as |item|}}
{{#app-feed-small onClick=(action "getDetail" item) class="col-xs-5" feed=item}} {{/app-feed-small}}
{{/each}}
</div>
</div>
route.js is as below
import Ember from 'ember';
export default Ember.Route.extend({
store: Ember.inject.service(),
model(){
//Populating module. Works just fine
} ,
actions:{
getDetails(feed){
console.log("Getting details of "+feed.id);
}
}
});
I have defined getDetails action as mentioned in my template.js of the route still i am getting below error
""Assertion Failed: An action named 'getDetail' was not found in (generated feed.index controller)""
feed.index is my route.
I used same method and modified paper-chip's source to get action corresponding to click on paper-chip's item which worked. But i am not able to do same in my own component.
Please let me know what is missing
Your problem is that in your second last code snippet, the one with your template. You refer to the action as getDetail but in route.js your last code snippet you declare the action as getDetails which is different to the code in your template. It's a common spelling error, one has an "s" st the end whereas the other doesn't.
The actions should be in controllers. And if controller bubbles up then the action in route be called.
For your case you don't need controller.
You can use ember-transition-helper
I assume you have in router.js :
this.route('feeds', function(){
this.route('edit', {path: '/:id'});
});
Now your template is going to be :
{#app-sidenav user=model}}{{/app-sidenav}}
<div class="content">
<div class="row">
{{#each model as |item|}}
{{#app-feed-small onClick=(transition-to "feeds.edit" item) class="col-xs-5" feed=item}} {{/app-feed-small}}
{{/each}}
</div>
</div>
sendAction is an ancient way to calling action inside controller/route.
The new style is to use closure action, which passes action as a value by creating a closure at the time of value passing.
Yes, you are correct. The action has been sendAction is able to bubble up from,
correspond controller -> correspond route -> upper route -> ... -> application route
However, closure action does NOT bubble.
Please refer to Ember component send action to route where #kumkanillam detailed explained how to call action inside route using different method and the differences between sendAction and closure action.
I have also made a sample project and write a simple explanation for it at,
https://github.com/li-xinyang/FE_Ember_Closure_Action
I have a widget dashboard app where the individual widgets are displayed using the component helper. A template ends up looking like this:
<div class="panel panel-default">
<div class="panel-body">
{{component model.displayComponent model=model}}
</div>
</div>
A Widget instance will return a path for the displayComponent like: widgets/category/specific-widget.
What I'm finding, in Ember 2.1, is that the attributeBindings and classBindings defined on the component are not being applied. And I think they were being applied back in Ember 1.13.
In other words, in 1.13 think a component defined like this:
// app/components/widgets/category/specific-widget.js
export default Ember.Component.extend({
model: null,
classNames: [ 'widget-content' ],
attributeBindings: [ 'style:style' ],
style: Ember.computed.readOnly('model.contentHeight')
});
I would get a <div id="ember..." style="height:300px" class="ember-view widget-content">...</div>. Now I simply get the default <div id="ember..." class="ember-view">...</div>.
Am I mistaken about the old behavior? If not, is there a way to make this work the old way?
P.S. I'm unable to find the documentation for the component helper anywhere. Is that on the ember.js site?
EDIT: developer error... I had my path to my widget templates named differently (plural) than my widget code. For example: my template was app/templates/components/widgets/categories/widget.hbs but my widget code was app/components/widgets/category/widget.js. Because Ember inserts a component code in there by default, there was no error thrown. If I had made the mistake in the other direction an error would have been thrown.
I am using Ember.js to create a one page map editing software.
In my app, I use a model to represent the layer's state of the map and to associate it with an actual openlayers' layer.
There is a summary of my work:
in my entry point map.hbs, I call the mapLayers view:
{{view "mapLayers"}}
Here is the mapLayers view definition:
export default Ember.View.extend({
templateName: "mapLayers",
classNames: ["map-layers"]
});
The mapLayers template :
<ul>
{{#each layer in tileLayers itemController="mapLayer"}}
<li {{bind-attr id=layer.identifier}}>
<a>
<label class="hint--top" {{bind-attr data-hint=layer.title}}>
{{str-sub layer.title 20}}
</label>
{{input class="range" type="range" name="range" min="0" max="100" value=layer.opacity}}
</a>
</li>
{{/each}}
</ul>
And the mapLayer controller:
export default Ember.ObjectController.extend({
opacity: function(key, value){
var model = this.get('model');
if (value === undefined) {
// property being used as a getter
console.log("get layer opacity: " + model.get('opacity'));
return model.get('opacity') * 100;
} else {
// property being used as a setter
model.set('opacity', value / 100);
model.get('layer').setOpacity(value / 100);
model.save();
return value;
}
}.property('model.opacity')
});
As you see, I am using the proxy ObjectController to modify on the fly the values set and get in the view.
I'm trying to understand how to remove the ObjectController without success.
I tried to change to Ember.Controller but how can I proxy my model properties then??
I read this without help:
OBJECTCONTROLLER
Experienced Ember users have enjoyed the use of proxying behavior in
the Ember.ObjectController class since 1.0. However, this behavior
will be removed in Ember 2.0 as the framework migrates to routable
components.
New users hit three roadbumps when learning about the object
controller pattern.
Given a certain model, which of the three controller options should I
be using? Which controller is generated by the framework if I do not
specify one? When using an object controller, why should the this
context not be passed to actions if it has the properties of my model?
For these reasons, the Road to Ember 2.0 RFC listed object controllers
as a concept to be removed from the framework.
To migrate from an explicitly defined object controller, first convert
the class definition to inherit from Ember.Controller. For example:
import Ember from "ember";
// Change: export default Ember.ObjectController.extend({ // To:
export default Ember.Controller.extend({
// ...
Next update any use of {{modelPropertyName}} in templates with
{{model.modelPropertyName}}. You should also review any computed
property dependent keys, observer keys, and get and set statements on
the route and controller.
Instead of proxying you just have to fully qualify you are getting the property off of the model, instead of the controller, which is what is in scope in your template and controller.
Template
<ul>
{{#each layer in tileLayers itemController="mapLayer"}}
<li id={{layer.model.identifier}}>
<a>
<label class="hint--top" data-hint={{layer.model.title}}>
{{str-sub layer.model.title 20}}
</label>
{{input class="range" type="range" name="range" min="0" max="100" value=layer.opacity}}
</a>
</li>
{{/each}}
</ul>
Controller
export default Ember.Controller.extend({
opacity: function(key, value){
var model = this.get('model');
if (value === undefined) {
// property being used as a getter
console.log("get layer opacity: " + model.get('opacity'));
return model.get('opacity') * 100;
} else {
// property being used as a setter
model.set('opacity', value / 100);
model.get('layer').setOpacity(value / 100);
model.save();
return value;
}
}.property('model.opacity')
});
I've created a component like this:
templates/components/files-dropzone.hbs
<p>Awesome text</p>
<textarea id="drop-textarea" rows="10" cols="50">
{{value}}
</textarea>
components/files-dropzone.js
import Ember from 'ember';
export default Ember.Component.extend({
value: '',
valueChanged: function() {
console.log("yup") // is never triggered
}.observes('value'),
})
I'm using this component like this in another template:
<div class="large-7 columns padding-left-reset"
{{files-dropzone value=body}}
</div>
While the textarea contains the correct value for body when I load the page it doesn't bind it. I'm observing body and it doesn't change when I change the text inside the textarea.
EDIT: The value-attribute in the component itself doesn't change as well
What am I doing wrong?
I don't think that Ember knows that it should bind the {{value}} to the text area.
It should work, using the textarea helper:
{{textarea value=value id="drop-textarea" rows="10" cols="50"}}
Do you want to adapt the behaviour of the text area in some way?
I want to use bind-attr and input helpers together so i can assign class to my input field. I have a workaround to do so like creating a parent dom and use bind-attr on that
<td {{bind-attr class="showmsg:alert-msg"}} >{{input type="text" value=rank}}</td>
How can I use bind-attr inside the input helper?
Refer to Views: Customizing a View's Element for general view customisation.
You can use classNameBindings in much of the same sort as you are using in bind-attr above.
In view:
export default Ember.TextField.extend({
classNameBindings: ['showmsg:alert-msg'],
showmsg: true
});
If you want to do something such as dynamic classes, you can pass values to your view through, for example, a controller:
In template:
{{view 'some-td-view' classBinding="typeClass"}}
where typeClass refers to a property on the controller
In Controller:
typeClass: function() {
return this.get('type');
}.property('type')
In View (views/some-td-view.js):
export default Ember.TextField.extend({
tagName: 'td',
classNames: ['some-default-class'],
});
So dependant on the controller's value of type you can have a variable typeClass. For a type of multi would result in a view of:
<td class="some-default-class multi"></td>
whereas a type of single would result in:
<td class="some-default-class single"></td>