Given the code below, is there a better way to register an event handler on the resize plugin? Thanks!
var target = Y.Node.create('<div class="rich-text-container"></div>');
// ...
target.plug(Y.Plugin.Resize,{
wrap : true
});
target[Y.Plugin.Resize.NS].on('resize:end',function (e) {
debugger;
// This runs, but is there a better way?
});
target.resize.on('resize:end',function (e) {
alert('this is correct');
});
Y.Plugin.Resize.NS points to the string 'resize' and indicates where on the plugin host the plugin instance will be stored. Derp.
Related
I'm trying to keep this variable in the callback:
var that = this
// type1
bootbox.confirm("This is the default confirm!", function(result){
console.log(that.whatever);
});
// type2
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
callback: function (result) {
console.log(that.whatever);
}
});
It looks ugly, is there any better way to do it?
You can use an arrow function:
bootbox.confirm("This is the default confirm!", result => {
console.log(this.whatever);
});
You should compile this with Babel though, older browsers may not support it. If you have the callback as a variable, you can bind it before passing:
yourCb.bind(this);
bootbox.confirm("This is the default confirm!", yourCb);
It will have a callback function called repeatedly to when I start a download task. But It will be so slow that it can't give feedback when touch a button.
Fileio.downloadFile(downloadData[downloadFileIndex].uri, '1.jpg',this.progressFunc.bind(this)).then((DownloadResult)=> {
if (DownloadResult.statusCode == 200) {
let nextDownloadFileIndex = this.props.downloadFileIndex + 1;
this.props.dispatch(DOWNLOADED_A_FILE({
downloadFileIndex:nextDownloadFileIndex,
progressNum:0
}))
}
}).catch((error)=> {
console.log(error)
})
This is my code and the callback function are as be folllowed
progressFunc(DownloadBeginCallbackResult) {
let progressNum = DownloadBeginCallbackResult.bytesWritten / DownloadBeginCallbackResult.contentLength;
if(progressNum<=0.99){
this.props.dispatch(DOWNLOADING_A_FILE({
progressNum:progressNum,
jobId:this.props.jobId
}));
}else{
this.props.dispatch(DOWNLOADING_A_FILE({
progressNum:0,
jobId:this.props.jobId
}));
}
}
I mean I can't get feedback immediately when I touch button. I think that it is because I have a callback function called repeatedly. so js can't handle so many tasks;
It does sound like JS thread is busy doing the request and not able to communicate back to UI thread. One thing you can try is to wrap you on press handler in an InteractionManager.runAfterInteractions(() => ...)
See https://facebook.github.io/react-native/docs/interactionmanager.html
I have this script:
<aui:script use="aui-node,aui-io-request,aui-base,event">
AUI().use('event', 'aui-node', 'aui-base', function (A) {
var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost').on('keyup', function (event) {
alert("Hi you have performed On change Event and Thank You");
});
})
</aui:script>
Why doesn't the alert ever appear?
Your code has multiple issues:
You do not need to specify an AUI().use(//... if you are using <aui:script> with the use attribute.
You only need to specify the aui-node module as an argument to the use attribute.
You most likely do not want to set inputObject equal to the return value of the on method. Instead it seems that you would want to do var inputObject = A.one('#id');.
A change event is not the same as a keyup event, so either your .on('change', function(event) { //... or your alert message which claims that it is an onchange event is incorrect.
You may have an issue with your A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost') failing to find the element (check the browser logs to find out if this is true). If it is, your element may have a partially generated prefix which can be obtained using <portlet:namespace />.
If you put all that together:
<aui:script use="aui-node">
// possibly change the A.one() argument to '#<portlet:namespace />_Tend_ApplicationMain_WAR_ETenderportlet_vrednost'.
var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost');
inputObject.on('keyup', function (event) {
alert("Hi you have performed On keyup Event and Thank You");
});
</aui:script>
Here's a runnable example:
YUI().use('aui-node', function(A) {
var inputObject = A.one('#_Tend_ApplicationMain_WAR_ETenderportlet_vrednost');
inputObject.on('keyup', function (event) {
alert("Hi you have performed On keyup Event and Thank You");
});
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<input id="_Tend_ApplicationMain_WAR_ETenderportlet_vrednost" />
I am now using dojo 1.8.3 and now have a BorderContainer with 2 ContentPane on my page. I would like to listen the resize event, the code like this
dojo.ready(function(){
dojo.connect(dijit.byId("Container"), "resize", function(changeSize, resultSize){
// do my stuff here...
});
});
However, is there anyway to let me know if the resize (splitting) is end? Please advice, thanks!
First of all, I'd recommend using "modern dojo", since you're using dojo 1.8 anyway. dojo/connect is deprecated and the way to "monitor" function calls is now by using dojo/aspect.
So you'd end up with something like:
require(["dojo/ready", "dojo/aspect", "dijit/registry"], function(ready, aspect, registry) {
ready(function() {
aspect.after(registry.byId("Container"), "resize", function() {
// do something after resize has been called...
});
});
});
If you want to have access to the arguments that have been passed to the resize function, call aspect.after with true as the last argument like:
aspect.after(registry.byId("Container"), "resize", function(changeSize, resultSize) {
// do something with changeSize and resultSize after resize has been called...
}, true);
When FloatingPane change size, I would like to launch a function.
I think there is something with resizeHandle but not know how to do.
I use Dojo 1.8+.
Thanks
Indeed, you have to define an event handler for the resize handler of your floating pane.
For example:
require(["dojo/on"], function() {
var floatingPaneObj = ...;
...
floatingPaneObj.startup();
on(floatingPaneObj._resizeHandle, "resize", function(e) {
// Your event handler
});
});
I also made a working JSFiddle to demonstrate it. http://jsfiddle.net/8azsz/2/