Ionic Framework equivalent for Knockout? - angularjs

Question

I am fond of Durandal and KO frameworks, I just find them to be a more elegant, simpler solution.
However Angular with Google behind it had enjoyed better marketing success and hence the more choice of customizations.
Now is there something of equivalent nature on the KO end to Ionic? Or is the war already won and I just need to move on.

Answer 1

TL;DR
Don't know of any alternative for KO/Durandal but going your own way may be a better choice.
What I understand from Ionic it is a wrapper around the core Cordova hybrid framework. As you mentioned it is built with the idea to use AngularJS everywhere. Besides being a wrapper it also provides additional plugins.
So essentially if you will it is just a simplification for NG developers. I don't want to say it is not doing a good job, but actually you can do all of that by your own with Knockout & Durandal as well. So far I've built a few demo apps with Cordova + Durandal and have to say it's getting better and better, especially the node cli tools provided from Cordova accelerate development a lot. The big advantage in my view with going this way is that you have complete freedom of what Frameworks and Libraries you choose.
Choose whatever MVWhatever JS framework you like
Choose your GUI Framework (take a look at Ratchet pretty slick :)
Pick the plugins you need or write them yourself
Decide which CSS derivate you like best or stick to the basic if you dont care
Enjoy modularization and lazy loading with RequireJS :)

Answer 2

I believe you could just reuse Ionic CSS (like you do with Bootstrap) to get mobile-friendly styling, and then wire up some KO bindings to make it respond to user's actions.
A simple example: imagine you want to make a tabbed interface (i took markup from the docs)
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
With ionic you would have to leverage ion-tabs, but with durandal/KO you have compose and views:
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light" data-bind="delegatedHandler: 'click'">
<div class="tabs" data-bind="foreach: tabs">
<a class="tab-item" href="#" data-bind="delegatedClick: $parent.setView.bind($parent), css: {active: isActive}">
<i class="icon" data-bind="css: icon"></i>
<span data-bind="text: title"></span>
</a>
</div>
</div>
<div data-bind="compose: {view: activeView, cacheViews: true}"></div>
And then add a topping in your vm:
return {
tabs: [
{title:'Test', view: 'test.html', icon: 'ion-home', isActive: ko.observable(false)},
{title:'Favourites', view: 'favs.html', icon: 'ion-star', isActive: ko.observable(false)},
...
],
,activeView: ko.observable(),
,setView: function(view) {
this.activeView(view.view || view);
this.tabs.forEach(function(v){
v.isActive(v.view === viewName);
});
}
}
It's just to give you idea of possible approach. After all, angular and KO are very similar... And most of ionic's JS components are already implemented in durandal (e.g. navigation closely resembles routing and composition).