离子框架相当于Knockout?

Alw*_*wyn 6 angularjs knockout.js durandal ionic-framework

我喜欢Durandal和KO框架,我发现它们是一个更优雅,更简单的解决方案.

然而,与谷歌背后的Angular享有更好的营销成功,因此更多的自定义选择.

现在在离子的KO端有一些等价的东西吗?或者战争已经赢了,我只需要继续前进.

zew*_*666 10

TL; DR不知道KO/Durandal的任何替代方案,但走自己的路可能是更好的选择.

我从Ionic了解到它是核心Cordova混合框架的包装.正如您所提到的,它的构思是在任何地方使用AngularJS.除了作为包装器,它还提供额外的插件.

因此,如果您愿意,它只是NG开发人员的简化.我不想说它做得不好,但实际上你也可以通过自己的Knockout和Durandal完成所有这些工作.到目前为止,我已经使用Cordova + Durandal构建了一些演示应用程序,不得不说它越来越好,特别是Cordova提供的节点cli工具可以加速开发.通过这种方式,我认为最大的优势在于您可以完全自由选择框架和库.

  • 选择你喜欢的任何MVWhatever JS框架
  • 选择你的GUI框架(看看Ratchet非常漂亮:)
  • 选择您需要的插件或自己编写
  • 如果你不在乎,决定你最喜欢哪个CSS派生或坚持基本
  • 使用RequireJS享受模块化和延迟加载:)


Sta*_*bko 2

我相信你可以重用Ionic CSS(就像使用 Bootstrap 一样)来获得适合移动设备的样式,然后连接一些 KO 绑定以使其响应用户的操作。

一个简单的例子:假设你想制作一个选项卡式界面(我从文档中获取了标记)

<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>
Run Code Online (Sandbox Code Playgroud)

使用 ionic 你必须利用ion-tabs,但是使用 durandal/KO 你有compose和视图:

  <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>
Run Code Online (Sandbox Code Playgroud)

然后在你的虚拟机中添加一个配料:

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);
        });
    }
}
Run Code Online (Sandbox Code Playgroud)

这只是为了让您了解可能的方法。毕竟,Angular 和 KO 非常相似...而且 ionic 的大部分 JS 组件已经在 durandal 中实现了(例如,导航与路由和组合非常相似)。