I am using named-blocks which I really like but I am unable to call an action from within them. This is an example of my code, the action works perfectly if not in the named-block
Controller
things = {
run: false,
walk: false,
jog: false,
}
#action
doSomething(thing) {
this.things[thing] = true;
}
Template
<MyComponent>
<:title>Some cool title...</:title>
<:button><MyButton {{on 'click' (fn this.doSomething 'run')}}/></:button>
</MyComponent>
MyComponent Template
<div>
{{yield to="title"}}
{{yield to="button"}}
</div>
MyButton Template
<button type="button>
Do a thing
</div>
given this component invocation
<MyButton {{on 'click' (fn this.doSomething 'run')}}/>
the MyButton component must have ...attributes in order to specify where to place attributes, modifiers, etc -- the "stuff on an element":
<button type="button ...attributes>
Do a thing
</button>
So to solve this I had to modify the templates like so:
<MyComponent>
<:title>Some cool title...</:title>
<:button><MyButton #clickAction={{fn this.doSomething 'run'}}/></:button>
</MyComponent>
<button type="button {{on 'click' #clickAction}}>
Do a thing
</div>
i have button in component
<button type="button" class="btn btn-sm btn-default" {{action "applyDateFilter"}}>GO</button>
Now i have written this action applyDateFilter in component.js like this
applyDateFilter() {
var variable = this.get('dateFilter');
this.sendAction('testAction2');
}
Now i have another action in main route.js file
testAction2: function(){
alert('test');
}
Now i want to call this route action from applyDateFilter action so how can i do this.I am using ember js version 2.10.
Thanks
option 1.You need to define action in controller, and use send method to call action in route.
testAction2(){
this.send('testAction2Route');
}
option 2.Install ember route action helper addon. and you can invoke it directly from component like the below,
<button type="button" class="btn btn-sm btn-default" {{route-action "applyDateFilter"}}>GO</button>
Note using route-action instead of usual action helper
Refer this answer for classic action and closure action and route action related stuff
If I have component in block form:
//some-component.hbs
{{#some-component}}
<button {{action "someAction"}}>test</button>
<!-- assume you have multiple buttons here with multiple actions -->
{{/some-component}}
//some-component.js
Ember.Component.extend({
actions: {
someAction() {
alert('NOT BEING CALLED');
}
}
});
using Ember > v2.0. The action is not being called.
If I call it:
{{some-component}}
and put:
<button {{action "someAction"}}>test</button>
inside the some-component.hbs template. then it works. but this way has some drawbacks which I want to avoid.
I've looked at the docs and everywhere it doesn't seem to have this sort of case.
the answer is:
{{yield this}}
in the template
and:
{{#some-component as |component|}}
<button {{action "someAction" target=component}}>TEST</button>
{{/some-component}}
I'm trying to create a custom login only using Facebook and only looking for two endpoints: "name" and "avatar".
For starters I don't know if "avatar" is even a real endpoint name but that's what I'm trying to access.
I have created a test app on FB, I have also installed all of the Meteor packages that I need so the groundwork is done.
I've create the following template:
<template name="Login">
<h2>Login</h2>
{{#if currentUser}}
{{currentUser.services.facebook.name}}
{{currentUser.services.facebook.avatar}}
<button id="logout">Logout</button>
{{else}}
<button id="facebook-login" class="btn btn-default">Login with Facebook</button>
{{/if}}
</template>
and then in the SERVERS directory I have create a .js file to store my API keys.
My questions:
My first question is where to find the names of these endpoints as I've been going the entire documentation on FB and nothing references "name" or "avatar" so the first thing I need to understand is where to find these endpoints as I haven't been able to locate even the "name".
Second question is the API shows JSON objects and that's usually how you would hookup your endpoints but in Meteor since all of that is abstracted it's unclear where this "facebook" object exists to then study more in depth the nested properties like "name" and "avatar" (which again i'm uncertain if that is the correct name for that property). I'm assuming because I'm using Meteor that calling an endpoint like this {{currentUser.services.facebook.name}} is enough, am I thinking about this correctly?
Final question is if I have to call these endpoints like this inside of my template:
{{#if currentUser}}
{{currentUser.services.facebook.name}}
{{currentUser.services.facebook.gender}}
<button id="logout">Logout</button>
{{else}}
<button id="facebook-login" class="btn btn-default">Login with Facebook</button>
{{/if}}
Then even if I wrap my facebook name and gender in their own divs like this:
{{#if currentUser}}
<div class="name">
{{currentUser.services.facebook.name}}
</div>
<div class="avatar">
{{currentUser.services.facebook.avatar}}
</div>
<button id="logout">Logout</button>
{{else}}
<button id="facebook-login" class="btn btn-default">Login with Facebook</button>
{{/if}}
This still doesn't make it very obvious to me how to move it say the header?
So in other words how would I have the user login from the main body of the page, yet after they login have the actually username and avatar up in the header?
There is no obvious way for me to do this.
What am I missing? How would I DOM shuffle to move the .name and .avatar divs to the header when I just logged the user in via the body of the page?
Does this make sense?
My hunch is that I would have to create another template within the header that calls these values?
Anyone play around with this that could offer some insight?
Thank you.
The first part of your question is answered here:
https://stackoverflow.com/a/15019052/1327678
The answer to the second part of your question is in the docs. You could make a template helper to check this:
Template.header.helpers({
currentUser: function(){
if(Meteor.user()){
return true;
}
else{
return false;
}
}
});
And in your template just write:
{{#if currentUser}}
{{!-- your facebook code here --}}
{{/if}}
There are numerous questions that ask in one way or another: "How do I do something after some part of a view is rendered?" (here, here, and here just to give a few). The answer is usually:
use didInsertElement to run code when a view is initially rendered.
use Ember.run.next(...) to run your code after the view changes are flushed, if you need to access the DOM elements that are created.
use an observer on isLoaded or a similar property to do something after the data you need is loaded.
What's irritating about this is, it leads to some very clumsy looking things like this:
didInsertElement: function(){
content.on('didLoad', function(){
Ember.run.next(function(){
// now finally do my stuff
});
});
}
And that doesn't really even necessarily work when you're using ember-data because isLoaded may already be true (if the record has already been loaded before and is not requested again from the server). So getting the sequencing right is hard.
On top of that, you're probably already watching isLoaded in your view template like so:
{{#if content.isLoaded}}
<input type="text" id="myTypeahead" data-provide="typeahead">
{{else}}
<div>Loading data...</div>
{{/if}}
and doing it again in your controller seems like duplication.
I came up with a slightly novel solution, but it either needs work or is actually a bad idea...either case could be true:
I wrote a small Handlebars helper called {{fire}} that will fire an event with a custom name when the containing handlebars template is executed (i.e. that should be every time the subview is re-rendered, right?).
Here is my very early attempt:
Ember.Handlebars.registerHelper('fire', function (evtName, options) {
if (typeof this[evtName] == 'function') {
var context = this;
Ember.run.next(function () {
context[evtName].apply(context, options);
});
}
});
which is used like so:
{{#if content.isLoaded}}
{{fire typeaheadHostDidRender}}
<input type="text" id="myTypeahead" data-provide="typeahead">
{{else}}
<div>Loading data...</div>
{{/if}}
This essentially works as is, but it has a couple of flaws I know of already:
It calls the method on the controller...it would probably be better to at least be able to send the "event" to the ancestor view object instead, perhaps even to make that the default behavior. I tried {{fire typeaheadHostDidRender target="view"}} and that didn't work. I can't see yet how to get the "current" view from what gets passed into the helper, but obviously the {{view}} helper can do it.
I'm guessing there is a more formal way to trigger a custom event than what I'm doing here, but I haven't learned that yet. jQuery's .trigger() doesn't seem to work on controller objects, though it may work on views. Is there an "Ember" way to do this?
There could be things I don't understand, like a case where this event would be triggered but the view wasn't in fact going to be added to the DOM...?
As you might be able to guess, I'm using Bootstrap's Typeahead control, and I need to wire it after the <input> is rendered, which actually only happens after several nested {{#if}} blocks evaluate to true in my template. I also use jqPlot, so I run into the need for this pattern a lot. This seems like a viable and useful tool, but it could be I'm missing something big picture that makes this approach dumb. Or maybe there's another way to do this that hasn't shown up in my searches?
Can someone either improve this approach for me or tell me why it's a bad idea?
UPDATE
I've figured a few of the bits out:
I can get the first "real" containing view with options.data.view.get('parentView')...obvious perhaps, but I didn't think it would be that simple.
You actually can do a jQuery-style obj.trigger(evtName) on any arbitrary object...but the object must extend the Ember.Evented mixin! So that I suppose is the correct way to do this kind of event sending in Ember. Just make sure the intended target extends Ember.Evented (views already do).
Here's the improved version so far:
Ember.Handlebars.registerHelper('fire', function (evtName, options) {
var view = options.data.view;
if (view.get('parentView')) view = view.get('parentView');
var context = this;
var target = null;
if (typeof view[evtName] == 'function') {
target = view;
} else if (typeof context[evtName] == 'function') {
target = context;
} else if (view.get('controller') && typeof view.get('controller')[evtName] == 'function') {
target = view.get('controller');
}
if (target) {
Ember.run.next(function () {
target.trigger(evtName);
});
}
});
Now just about all I'm missing is figuring out how to pass in the intended target (e.g. the controller or view--the above code tries to guess). Or, figuring out if there's some unexpected behavior that breaks the whole concept.
Any other input?
UPDATED
Updated for Ember 1.0 final, I'm currently using this code on Ember 1.3.1.
Okay, I think I got it all figured out. Here's the "complete" handlebars helper:
Ember.Handlebars.registerHelper('trigger', function (evtName, options) {
// See http://stackoverflow.com/questions/13760733/ember-js-using-a-handlebars-helper-to-detect-that-a-subview-has-rendered
// for known flaws with this approach
var options = arguments[arguments.length - 1],
hash = options.hash,
hbview = options.data.view,
concreteView, target, controller, link;
concreteView = hbview.get('concreteView');
if (hash.target) {
target = Ember.Handlebars.get(this, hash.target, options);
} else {
target = concreteView;
}
Ember.run.next(function () {
var newElements;
if(hbview.morph){
newElements = $('#' + hbview.morph.start).nextUntil('#' + hbview.morph.end)
} else {
newElements = $('#' + hbview.get('elementId')).children();
}
target.trigger(evtName, concreteView, newElements);
});
});
I changed the name from {{fire}} to {{trigger}} to more closely match Ember.Evented/jQuery convention. This updated code is based on the built-in Ember {{action}} helper, and should be able to accept any target="..." argument in your template, just as {{action}} does. Where it differs from {{action}} is (besides firing automatically when the template section is rendered):
Sends the event to the view by default. Sending to the route or controller by default wouldn't make as much sense, as this should probably primarily be used for view-centric actions (though I often use it to send events to a controller).
Uses Ember.Evented style events, so for sending an event to an arbitrary non-view object (including a controller) the object must extend Ember.Evented, and must have a listener registered. (To be clear, it does not call something in the actions: {…} hash!)
Note that if you send an event to an instance of Ember.View, all you have to do is implement a method by the same name (see docs, code). But if your target is not a view (e.g. a controller) you must register a listener on the object with obj.on('evtName', function(evt){...}) or the Function.prototype.on extension.
So here's a real-world example. I have a view with the following template, using Ember and Bootstrap:
<script data-template-name="reportPicker" type="text/x-handlebars">
<div id="reportPickerModal" class="modal show fade">
<div class="modal-header">
<button type="button" class="close" data-dissmis="modal" aria-hidden="true">×</button>
<h3>Add Metric</h3>
</div>
<div class="modal-body">
<div class="modal-body">
<form>
<label>Report Type</label>
{{view Ember.Select
viewName="selectReport"
contentBinding="reportTypes"
selectionBinding="reportType"
prompt="Select"
}}
{{#if reportType}}
<label>Subject Type</label>
{{#unless subjectType}}
{{view Ember.Select
viewName="selectSubjectType"
contentBinding="subjectTypes"
selectionBinding="subjectType"
prompt="Select"
}}
{{else}}
<button class="btn btn-small" {{action clearSubjectType target="controller"}}>{{subjectType}} <i class="icon-remove"></i></button>
<label>{{subjectType}}</label>
{{#if subjects.isUpdating}}
<div class="progress progress-striped active">
<div class="bar" style="width: 100%;">Loading subjects...</div>
</div>
{{else}}
{{#if subject}}
<button class="btn btn-small" {{action clearSubject target="controller"}}>{{subject.label}} <i class="icon-remove"></i></button>
{{else}}
{{trigger didRenderSubjectPicker}}
<input id="subjectPicker" type="text" data-provide="typeahead">
{{/if}}
{{/if}}
{{/unless}}
{{/if}}
</form>
</div>
</div>
<div class="modal-footer">
Cancel
Add
</div>
</div>
</script>
I needed to know when this element was available in the DOM, so I could attach a typeahead to it:
<input id="subjectPicker" type="text" data-provide="typeahead">
So, I put a {{trigger}} helper in the same block:
{{#if subject}}
<button class="btn btn-small" {{action clearSubject target="controller"}}>{{subject.label}} <i class="icon-remove"></i></button>
{{else}}
{{trigger didRenderSubjectPicker}}
<input id="subjectPicker" type="text" data-provide="typeahead">
{{/if}}
And then implemented didRenderSubjectPicker in my view class:
App.ReportPickerView = Ember.View.extend({
templateName: 'reportPicker',
didInsertElement: function () {
this.get('controller').viewDidLoad(this);
}
,
didRenderSubjectPicker: function () {
this.get('controller').wireTypeahead();
$('#subjectPicker').focus();
}
});
Done! Now the typeahead gets wired when (and only when) the sub-section of the template is finally rendered. Note the difference in utility, didInsertElement is used when the main (or perhaps "concrete" is the proper term) view is rendered, while didRenderSubjectPicker is run when the sub-section of the view is rendered.
If I wanted to send the event directly to the controller instead, I'd just change the template to read:
{{trigger didRenderSubjectPicker target=controller}}
and do this in my controller:
App.ReportPickerController = Ember.ArrayController.extend({
wireTypeahead: function(){
// I can access the rendered DOM elements here
}.on("didRenderSubjectPicker")
});
Done!
The one caveat is that this may happen again when the view sub-section is already on screen (for example if a parent view is re-rendered). But in my case, running the typeahead initialization again is fine anyway, and it would be pretty easy to detect and code around if need be. And this behavior may be desired in some cases.
I'm releasing this code as public domain, no warranty given or liability accepted whatsoever. If you want to use this, or the Ember folks want to include it in the baseline, go right ahead! (Personally I think that would be a great idea, but that's not surprising.)