Ionic Framework equivalent for Knockout?

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.

Underpinnings

This question is not really suitable for Stack Overflow as there's no right or wrong answer. Perhaps you would like to post this on programmers.stackexchange.com. – Valvule

There's I am looking for an alternate or a customization to the Ionic Framework that will work with KO/Durandal. – Underpinnings

Answer 1

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).

Chromatolysis

Answer 2

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 :)

Appointment

zewa, you're preaching to the choir :) – Underpinnings

Ionic is not a wrapper around Cordova. It is actually an AngularJS module that provides user interface controls like you have in the native app SDKs. You can use Cordova and KO/Durandal without Ionic, but then you'll have to do the work to build user interface controls (or use a GUI framework and build the supporting logic to tie into KO/Durandal). – Suggestive

Under the hood though it uses Cordova or PhoneGap (depending on your build scenario), e.g Ionic CLI is built on top of Cordova CLI. The provided things are as mentioned Angular Modules/Services/Directives along a Sass composition for GUI. You can use the GUI without Angular for other Frameworks but of course without the interactivity. – Appointment

Yeah, but I am not in the business of building UI. And honestly that requires more than just software devs to build out right. On the other hand Ionic UI might look canned, but also well built and professional looking. Gets me off the ground faster. – Underpinnings

Rachet does indeed look good, I've added a link in your post. goratchet.com – Samala