Using Knockout with the WijCarousel

Recently added with the release 2013v1 of Wijmo was an addition to the Knockout library enabling two way bindable functionality for the Data of the WijCarousel. This is perfect for those who want to manage the content of their carousel on the fly. In this example, I have decided to combine the checkbox functionality of the WijTree with the data of the WijCarousel. I will treat each value within the Tree as a “node”, meaning that they will all have their own specific properties as defined within the Model…

function PictureNode(url, text)  
{  
        this.imageUrl = url,  
        this.caption = text,  
        this.text = text  
}  

The “imageUrl” and “caption” properties are both necessary to insert pictures with captions into the WijCarousel, while the “text” property is used within the WijTree. In order to populate the nodes within the WijTree, I will create two ko.observableArray’s.

self.west = ko.observableArray([]);  
self.east = ko.observableArray([]);  

For each of the WijTree’s, I will set the “nodes” option to their specific array, as well as set several properties.

<ul id="westTree"data-bind="wijtree: {disabled: disabled, allowDrag: allowDrag, allowDrop:allowDrop,   
    nodes: west, showCheckBoxes: showCheckBoxes, nodeCheckChanged: nodeCheckChangedWest }">  
</ul>   

For each of the WijCarousel’s, I will also create two ko.observableArrays, and push some initial data into them.

self.visNodesWest = ko.observableArray([  
     new PictureNode("//cdn.mescius.io/assets/developer/blogs/legacy/wijmo/2013/05/Hawks.png", "Chicago Blackhawks")  
]);  
self.visNodesEast = ko.observableArray([  
     new PictureNode("//cdn.mescius.io/assets/developer/blogs/legacy/wijmo/2013/05/Pens.png", "Pittsburgh Penguins")  
]);  

I will then do the data-bind for the WijCarousel, by setting the “data” option to each array, as well as set several more options.

<div id="westCaro" data-bind="wijcarousel:{data:visNodesWest,showTimer:showTimer,   
      display:display, auto:auto, interval:interval}" style="height:200px;"></div>  

The WijTree has a built in function nodeCheckChanged, which will trigger anytime an option with in tree is checked or unchecked. I will trigger this function each time a change is made, and use Knockout to fill each array of the array’s bound to the Carousel.

self.nodeCheckChangedWest = function(e,data)  
{  
self.visNodesWest.remove(function(item){return item.text != "Chicago Blackhawks"});  
var nodes = $(this).wijtree("getCheckedNodes");  

$.each(nodes, function(index, elem)  
{  
         var text = $(elem).wijtreenode('option', 'text');  
         var url = $(elem).wijtreenode('option', 'imageUrl');  
self.visNodesWest.push(new PictureNode(url,text));  
});  
};  

When running, you will notice that once the team name is checked, the image will be added/removed from the WijCarousel. This is a great way to let Knockout do all the heavy lifting for you, as well as create a live interface for your end user. Let’s go Pens! Sample code can be found here.