where could i custom a event handler to bound. These events are very common like tap, taphold, swipeleft, swiperight
<div ontap="{onTap}" ontaphold="{onTapHold}" onswipeleft="{onSwipeLeft}" ...>
You can use all the "normal" events, a useful bunch are listed here: https://martinmuzatko.github.io/riot-cheatsheet/#global-events
Related
I'm having an issue with nested templates in Meteor.
If I have a template like this, with a child template inside it:
In parentTemplate.js
{{#if showParentTemplate}}
{{> parentTemplate}}
{{/if}}
<template name="parentTemplate">
{{> childTemplate}}
</template>
In childTemplate.js:
<template name="childTemplate">
<a class="someItem" href="#"></a>
</template>
When I register a click event on the element(anchor in this example), then show/hide the parent template on the DOM, I end up with an extra event listener on the anchor for each time I show the parent back on the DOM. I checked the Template.parentTemplate.onDestroy() and it is firing. That should mean the template and its events are being destroyed. I would imaging that includes destroying the child template and its events as well.
Here is a simple handler for the click event
Template.childTemplate.events({
'click .someItem' :(e,template)=>{
console.log('got it');
}
})
And to clarify, I am attaching the event listeners in the onCreated method, not the onRendered method.
I'm seeing that each time the parentTemplate is shown, the childTemplate fires the onCreated event, then multiple onRendered events. A new onRendered is added with each hide/show of the parentTemplate.
Is there something basic I'm missing here. It seems almost like there are multiple instances of the template on the DOM or the events are never destroyed. is there a correct way to destroy a Meteor template when it is hidden or removed form the DOM?
I'm newbie to Angular 2. What are the corresponding events from AngularJS to Angular 2?
eg: ng-click to (click)
How about ng-init and all others events? I'm not having intellisense in VS .NET, so it's hard to guess.
Any help please!
Thanks
The default handled events should be mapped from the original HTML DOM component's events:
http://www.w3schools.com/jsref/dom_obj_event.asp
by just removing the on prefix.
onclick ---> (click)
onkeypress ---> (keypress)
etc...
You can also create your custom events.
However ngInit is not an HTML event, this is part of the Angular's Component lifecycle, and in Angular 2 they are handled using "hooks", which are basically specific method names inside your component that will be called whenever the component enters the specific cycle. Like:
ngOnInit
ngOnDestroy
etc...
Here is the list of events in Angular
Please check in the documentation if required for more info
(focus)="myMethod()"
(blur)="myMethod()"
(submit)="myMethod()"
(scroll)="myMethod()"
(cut)="myMethod()"
(copy)="myMethod()"
(paste)="myMethod()"
(keydown)="myMethod()"
(keypress)="myMethod()"
(keyup)="myMethod()"
(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"
(click)="myMethod()"
(dblclick)="myMethod()"
(drag)="myMethod()"
(dragover)="myMethod()"
(drop)="myMethod()"
This is one of the big advantages of Angular2. Not every event needs a customized ng-xxx directive anymore.
With custom elements and all other libraries producing all kinds of custom events, this approach doesn't fly.
In Angular2 the (eventName)="expression" binding syntax allows to subscribe to any known and unknown event.
The $event variable is still available (eventName)="myEventHandler($event)"
See also https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding
A great place to begin to understand Angular 2 is the official Web Page.
Here you can see all the angular2/common ng-XXX although now it is as follows ngXxxx
In my case the best way to understand the differences between Angular 1 and Angular 2 was doing the tutorials:
Tour of Heroes
The Developer Guide: this is a practical guide to Angular for experienced programmers who are building client applications in HTML and JavaScript.
You can use the following syntax to handle events (for example click like ng-click with Angular1):
<button (click)="callSomeMethodOfTheComponent()">Click</button>
The difference here is that this is more generic. I mean you can use DOM events directly but also custom ones defined using the EventEmitter class.
Here is a sample that describes how to handle a click event and a custom event (my-event) trigged by a sub component:
#Component({
selector: 'my-selector',
template: `
<div>
<button (click)="callSomeMethodOfTheComponent()">Click</button>
<sub-component (my-event)="callSomeMethodOfTheComponent()"></sub-component>
</div>
`,
directives: [SubComponent]
})
export class MyComponent {
callSomeMethodOfTheComponent() {
console.log('callSomeMethodOfTheComponent called');
}
}
#Component({
selector: 'sub-component',
template: `
<div>
<button (click)="myEvent.emit()">Click (from sub component)</button>
</div>
`
})
export class SubComponent {
#Output()
myEvent: EventEmitter;
constructor() {
this.myEvent = new EventEmitter();
}
}
Hope it helps you,
Thierry
Ember.js has a great mechanism of binding data to views, of setting triggered event handling in the view, or using a Router. But what I would need is to be able to handle events triggered in already created HTML code (by PHP, server-side).
Let me show you a simple example. I have this code:
<a id="login" href="#">Login</a>
I need to be able to route/handle the click on this link so that it gets into my Ember application.
I have been looking for ways to do this, but I can't find any.
How can I do this?
If this link is inside a DOM element which is a child of the Ember managed element, then you can use the action helper:
<a id="login" href="#" {{action doSomeStuff}}>Login</a>
This doSomeStuff event will be sent to your Ember.Router, which has to implement the handler in the appropriated route:
...: Ember.Route.extend({
doSomeStuff: function (router) {
//...
}
}),
If the link is outside your app's scope, you can register handlers on the app-related elements using JQuery:
$('a#login').click(function () {
App.router.transitionTo('the.route.path');
});
The App.router being injected at Ember app's initialization, you can access it from anywhere.
But let me say that it is not a best practice to transition from outside the router.
Last but not least, you can also pass a context to the transitionTo call.
i'm trying to figure out the ajax's tag 'listener' property, and from what i read here
An ajax listener, connected to your ajax event with the listener attribute, is a method that will be called every time the ajax request is made
which is exactly what i'm looking for. i've also tried the first sample of code on that web page and it works as expected.
however, when i add the following code -
<h:commandButton id="d" image="#{CodeBean.imgSrc}" action="#{CodeBean.clickImg()}">
<f:ajax event="action" render="d" listener="#{CodeBean.update}" />
</h:commandButton>
both 'clickImg' and 'update' functions are called (and 'clickImg' does its task), but the 'update' is being performed BEFORE the 'clickImg' (i've added to both function 'System.out.println(...)'). and yes - in that sample code the 'update' is being performed after the 'setHello'
that makes no sense to me - or did i miss something?
cheers,
eRez
That's fully by specification. Action listeners are called before actions during invoke action phase. If you need to execute a business action and/or to navigate, do it in action. If you need to listen on the action event so that you can if necessary do some preprocessing, use listener.
In your particular case, it look like you don't need the action listener at all. Just remove it and move the job into the action method. The event attribute is by the way superfluous. It already defaults to action. Just remove it. This works equally good:
<h:commandButton image="#{CodeBean.imgSrc}" action="#{CodeBean.clickImg}">
<f:ajax render="#this" />
</h:commandButton>
See also:
Differences between action and actionListener
in the example you looked at setHello was a setter of h:inputText value and not an action like in your code , that is what you missed...
And that's why in the example the setter was called before the ajax listener...
I'm using Dojo 1.5, and I'm trying to create a context menu that can invocate a function myFunction passing the event and other arguments. So far I've the following code:
<div dojoType="dijit.Menu" id="bankerMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onclick="copyDocuments('bankerFolder');" iconClass="dijitEditorIcon dijitEditorIconCopy">Copy to Client</div>
<div dojoType="dijit.PopupMenuItem" onclick="doNothing()" iconClass="dijitEditorIcon dijitEditorIconCopy">
<span><s:text name="CopyTo.label"/></span>
<div dojoType="dijit.Menu" id="bigsubmenu">
var="distributionList">
<div dojoType="dijit.MenuItem" onclick="myFunction(event,'bankerFolder',1)"><s:property value='distributionListName'/></div>
</div>
</div>
</div>
But it is not recognizing the 'event' that I want to pass to the function. I know I can susbtitute the call using this:
<div dojoType="dijit.MenuItem" label="Some menu item 2">
<script type="dojo/method" event="onClick" args="evt">
myFunction(evt,'bankerFolder',1);
</script>
</div>
but I would like to simplify it and used the first syntax. How can I do that?
Passing event literally would likely end up leaving you at the mercy of cross-browser inconsistencies. However, since events connected through Dojo worry about this for you, and since onClick is a widget event that already receives the event object as an argument, you should be able to get away with the following:
<div dojoType="dijit.MenuItem" onClick="myFunction(arguments[0],'bankerFolder',1)"><s:property value='distributionListName'/></div>
Also note the capital C in onClick - widget events always use camel case; they are not actual DOM events, though they are often mapped to analogous DOM events. I get the impression you were testing with capital C though, based on the problem you described encountering.
Here's a simplified example of the idea working (initially provided/suggested by Dustin Machi in the Dojo IRC channel): http://jsfiddle.net/xwFC5/5/
Following from Ken's comment to the answer above, I managed to figure this out as outlined here: http://blue-networks.net/wp/?p=37 It connects to onCellContextMenu and pulls the relevant information out of the event, saving it into the grid object.