Exposing public methods in XUI JS framework plugin?
I've created a plugin for XUI, for example:
xui.extend({
myPlugin : function(){
var options = [];
function methodOne(obj){
}
function methodTwo(){
}
}
});
And now I can call:
<script type="text/javascript">
xui.ready(function(){
// call my plugin on an XUI object
x$('element').myPlugin();
});
</script>
But I also need to be able to access some of the methods within the plugin, something like this (this code doesn't work, but illustrates what I'm trying to be able to achieve)
<script type="text/javascript">
xui.ready(function(){
// call my plugin on an XUI object
x$('element').myPlugin();
var foo = bar;
// call one of my methods?
xui.fn.myPlugin.methodOne(foo);
});
</script>
Could anyone with a bit more experience with the XUI mobile framework lend a hand? Cheers
EDIT **
The below works, though it probably isn't very elegant...
xui.extend({
myPlugin : function(){
// create an API object
var api = {
'publicOne' : function(obj){
return methodOne(obj)
}
};
// add our API object to prototype
xui.fn.myPlugin.api = api;
/**
* the functions of the plugin
**/
// we'll expose this in the API object
function methodOne(obj){
// Do something with obj...
}
function methodTwo(){
}
}
});
And then on the page I can use this:
<script type="text/javascript">
xui.ready(function(){
// call my plugin on an XUI object, which does its thing
x$('element').myPlugin();
// arbitary
var foo = x$('#bar');
// call one of the methods statically
xui.fn.myPlugin.api.pluginOne(foo);
}开发者_运维技巧);
</script>
To explain the purpose, I'm creating something very similar to JQTouch, but of course without relying on the mega jQuery and sitting just on top of XUI. I have a method for handling page navigation, which handles 'page' transitions, but I need to be able to trigger the method programmatically as well.
Maybe the above will help other XUI folks, it's currently working for me but maybe could be improved?
Liam what would be more useful is probably understanding the reason you would want to do that? You could always expose the function through a callback.
xui.extend({
myPlugin : function(callback){
var options = [];
function methodOne(obj){
}
function methodTwo(){
}
if(typeof callback === 'function') {
return callback(this);
}
}
});
Then call it like this:
<script type="text/javascript">
xui.ready(function(){
// call my plugin on an XUI object
x$('element').myPlugin(function(myPublic) {
var foo = bar;
// call one of my methods?
myPublic.methodOne(foo);
});
});
</script>
This is untested but should work.
精彩评论