Hi everyone,
I have seen this question asked before, but never really felt like it was answered in a way I understood. I would like to know the best way to integrated 3rd party plugins into canjs. An example would be something such boostrap's carousel.js.
In side of control MyCarousel control, I would like to be able to append a mustache template that will become the basic slide for the carousel. After creating the carousel, I would then like to apply bootstrap's carousel.js to manipulate and control.
--- twbscarousel.js -----------------
Thanks,
Will Streeter (willsonic)
I have seen this question asked before, but never really felt like it was answered in a way I understood. I would like to know the best way to integrated 3rd party plugins into canjs. An example would be something such boostrap's carousel.js.
In side of control MyCarousel control, I would like to be able to append a mustache template that will become the basic slide for the carousel. After creating the carousel, I would then like to apply bootstrap's carousel.js to manipulate and control.
My approach so far has been to create a separate can.control.plugin
--- twbscarousel.js -----------------
steal('can/construct/super')
.then('can/control/plugin')
.then(function(){
var Twbscarousel = can.Control({
//pluginName: 'carousel'
// originally I used the above thinking naming the plugin 'carousel', would some how reference carousel.js, but this
// of course did not work... as the init() never gets called...
// of course did not work... as the init() never gets called...
pluginName : 'twbscarousel'
},{
init : function(element, options, arg1){
steal.dev.log("[Carousel]--INIT");
},
});
});
and then attempt to instantiate it inside of another control
steal('jquery',
'can/control',
'can/view',
'can/control/view',
'can/view/mustache',
'twbs/twbscarousel.js')
.then(function(){
can.Control("Rwdcarousel",
{
...
////////////////
I would like to be able to include and use 3rd party plugins through can.controls in a non-destructive way, but I just don't now how to go about it. In the past I have had de-construct 3 rd party plugins to enable them to be used in in my jmvc controllers, I was really hoping there would and easier way with canjs for me to include these plugins and gain control over them with can.control.
$( this.options.element).append(can.view(this.options.viewTemplate, {scrollList:this.options.contentList}));
$(document).off('.carousel.data-api');
// calling the plugin as I have done below with pluginName:"carousel"... does not call the init().. instead, it just calls
// the carousel.js
// calling the plugin as I have done below with pluginName:"carousel"... does not call the init().. instead, it just calls
// the carousel.js
//$(".carousel"). carousel({interval:false});
// this will reach the Twbscarousel init() function but it does not effect the carousel.js of course that have imported with steal.
$(".carousel"). twbscarousel({interval:false});
////////////////
I would like to be able to include and use 3rd party plugins through can.controls in a non-destructive way, but I just don't now how to go about it. In the past I have had de-construct 3 rd party plugins to enable them to be used in in my jmvc controllers, I was really hoping there would and easier way with canjs for me to include these plugins and gain control over them with can.control.
If what I am asking does not make sense, I have no problem re-wording my question or taking a different approach.
Thanks,
Will Streeter (willsonic)