I am getting some data from server and in my controller I am trying to display that in list format. What I want to do is to allow the user to click on any item of that list and call an action behind it. Here is my js code.
for(var index in posts) {
if (posts.hasOwnProperty(index)) {
console.log(1);
var attr = posts[index];
//console.log(attr);
/*$("ul#previous_recipients").append('<li class="list-group-item"><label>'+attr.name+'' +
'</label><a href="javascript:void(0)" class="close g-green" {{action "aa"}}>Add</a></li>');*/
$("ul#previous_recipients").append(Ember.Handlebars.compile('<li class="list-group-item"><label>{{attr.name}} </label>Add</li>'));
}
}
How to call action on it? {{action "test"}} is not being called.
You have to compile the handlebars template and define the test action inside actions hash in the same controller.
$("ul#previous_recipients").append(Ember.Handlebars.compile('
<li class="list-group-item"><label>{{attr.name}} </label>
Add</li>
'));
You have to move this html code from controller to a handlebars file,that will be good.
What you need to do is create an ember view and give it a
templateName
property which will contain your html and handlebars expression. Alternately, you could, inside the view say
defaultTemplate: Em.Handlebars.compile(/*your handlebars and html markup here*/)
using Jquery to do things like this is not the ember way of doing things.
Related
I want to add add multiple copies of a component via js and pass different params in it. The code should execute via controller action of click on a button in the template. The solution for 2.x doesn't work in Ember version 3.x(pre-octane). Can anybody please help. I can't render plain html as I am using other addon of ember in the component.
Basically you want an array with the params in the js, and then a {{#each loop invoking the components. Something like this:
#tracked componentParams = new TrackedArray();
#action showThem() {
this.componentParams.push({ value="foo" });
this.componentParams.push({ value="bar" });
this.componentParams.push({ value="baz" });
}
{{#each this.componentParams as |params|}}
<MyComponent #value={{params.value}} />
{{/each}}
<button type="button" {{on "click" this.showThem}}>Show Them</button>
(this uses TrackedArray from tracked-built-ins).
I am new to ember.js and working on an application to highlight text like below:
<div>
<h3 class = "title" {{action "highlight" "title"}}>{{document.title}}</h3>
<div class = "date" {{action "highlight" "date"}}>{{document.date}}</div>
<p class = "content" {{action "highlight" "content"}}>{{document.contents}}
</p>
</div>
I created a function highlight which will get the class name and highlight the search text the user input. This function works fine, but I have to click to trigger this highlight function. Is there any way in ember action helper can trigger this function whenever the div node rendered or automatically triggered?
What you probably need is to implement the hook didInsertElement, this will trigger as soon your component got rendered in the screen.
Example:
import Component from '#ember/component';
export default Component.extend({
didInsertElement() {
this._super(...arguments);
const title = this.element.querySelector('.title');
// do something with the title
},
});
More information about didInsertElement can be found in this guide: https://guides.emberjs.com/v2.18.0/components/the-component-lifecycle/
I don't understand your use-case entirely, but I think actions are not a good choice for your problem. I would recommend reading the ember guides about computed properties. These properties are recomputed everytime an underlying property changes.
highlightedContent: computed('userInput', 'content', function() {
....
//return computedContent;
})
I would also recommend reading the guides about handlebar-helpers. You could write a highlight-helper.
I have this integration test:
test('can change chord text', function(assert) {
this.render(hbs`{{chart-editor-chord chord=chord}}`);
this.$().click();
assert.ok(!!this.$('.chord-input').length);
});
but the assertion fails, the component template looks like this:
<div {{action 'changeChord'}} class="measure-chord chord-big">
{{#if chord.editing}}
<input type="text" value="{{chord.name}}" class="chord-input">
{{else}}
{{chord.name}}
{{/if}}
</div>
and the component code:
import Ember from 'ember';
export default Ember.Component.extend({
store: Ember.inject.service(),
actions: {
changeChord() {
this.chord.set('editing', true);
}
}
});
I'm updating the chord model in the changeChord() action and it does work if I test in the browser, but the integration test fails. So, does this change in the model have to be rendered synchronously to the template? I tried using wait() in the test but that doesn't make a difference. So how should I test this?
While I'm trying to create a twiddle for you, I found three things:
Where do you create chord mock in your test?
You are not sending event to the correct html component. Use this.$('.measure-chord') or this.$('.chord-big').
Instead of this.chord.set you should use this.get('chord').set. Actually Ember.set(this, 'chord.isEditing', ...) is even better.
And bonus: You don't need a div wrapper, component does this for you.
twiddles:
working copy
without div
It looks like your click helper is clicking the div that your component.js controls instead of the initial div in your template. If you specify the div in your click helper it should work:
this.$('.measure-chord').click();
I have a scenario where I have list of items and each item has a create button. When I click on create, I wanted a component to be appended to the list item. This component uses model data as parameter and also accesses store from within. To access the store in the component I am using targetObject.store
The component works well if I add it to the template manually like:
{{#each}}
<div> blah blah {{my-component data=this.something action="doSomething"}} <button {{action 'add' this}}>Add</button></div>
{{/each}}
I can probably show/hide the component using a flag, and toggle it when we click on Add button, but I rather do it dynamically if possible.
I did try this but didn't work for me because I couldn't access store :
actions: {
add: function(obj){
var view = Ember.View.create({
template: Ember.Handlebars.compile('{{my-component action="addQuestion"}}')
});
view.set('data', obj.get('something'));
Ember.run(function() {
//prolly can get parent view rather than document.body
view.appendTo(document.body);
});
}
}
Thanks.
I think this example answers your question:
http://emberjs.jsbin.com/axUNIJE/1/edit
I am using Ember 1.0pre and following Ember suggested application structure (Using Router).
For form validation, I want to call $('form').valid() method on Button click.
So I have following method in my view
validate: function(){
return this.$('form').valid()
}
Action in template file:
<button type="submit" class="btn" {{action doSaveSettings this}}>Save Changes</button>
and doSaveSettings method is in Controller.
How can I get instance of view in controller, for calling validate method?
EDIT:
In controller, this.view is null. I have put {{debugger}} in template and this refers to
<App.XyzController:ember1062> and this.view is null.
The default target of actions have been changed from the view to the router in ember 0.9.8.1 (I believe). To set the target to the view you need to override it like this
<button type="submit" class="btn" {{action doSaveSettings target="view"}}>Save Changes</button>
edit: Your controllers should not know about the view.
In ember the purpose of a view is only i repeat is only to handle events or to create reusable components
i would not suggest this since there is always a reason why views are not meant to be accessed from controller and its good to follow it, however if you really do want to use it you could do the below two ways:
I dont know if u r using ember-cli or ember but the logic is same. The answer however is for ember-cli
//Inside appname/controller/your-conroller.js
import reqdView from 'appname/views/your-view';
//Lets assume u want to call a function called validate inside view
//Add this statement inside the controller to run the validate function
reqdView.prototype.validate();
OR
var reqdViewInst = new reqdView();
reqdViewInst.validate();
If you want to validate the view then do the validation inside didInsertElement
export default Ember.View.extend({
didInsertElement:function()
{
this.validate();
},
validate:function()
{
//do your validation
}
});
OR
export default Ember.View.extend({
eventManager: Ember.Object.create({
didInsertElement:function(event, view)
{
view.validate();
}
}),
validate:function()
{
//do your validation
}
});