angularjs – 与Knockout等效的Ionic Framework?

前端之家收集整理的这篇文章主要介绍了angularjs – 与Knockout等效的Ionic Framework?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我喜欢Durandal和KO框架,我发现它们是一个更优雅,更简单的解决方案.

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

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

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

一个简单的例子:想象你想制作一个标签界面(我从the docs开始加标)

  1. <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
  2. <div class="tabs">
  3. <a class="tab-item active" href="#">
  4. <i class="icon ion-home"></i>
  5. Test
  6. </a>
  7. <a class="tab-item" href="#">
  8. <i class="icon ion-star"></i>
  9. Favorites
  10. </a>
  11. <a class="tab-item" href="#">
  12. <i class="icon ion-gear-a"></i>
  13. Settings
  14. </a>
  15. </div>
  16. </div>

使用离子,你必须利用ion-tabs,但是使用durandal / KO你可以撰写和观看:

  1. <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light" data-bind="delegatedHandler: 'click'">
  2. <div class="tabs" data-bind="foreach: tabs">
  3. <a class="tab-item" href="#" data-bind="delegatedClick: $parent.setView.bind($parent),css: {active: isActive}">
  4. <i class="icon" data-bind="css: icon"></i>
  5. <span data-bind="text: title"></span>
  6. </a>
  7. </div>
  8. </div>
  9. <div data-bind="compose: {view: activeView,cacheViews: true}"></div>

然后在你的虚拟机中添加一个顶部:

  1. return {
  2. tabs: [
  3. {title:'Test',view: 'test.html',icon: 'ion-home',isActive: ko.observable(false)},{title:'Favourites',view: 'favs.html',icon: 'ion-star',...
  4. ],activeView: ko.observable(),setView: function(view) {
  5. this.activeView(view.view || view);
  6. this.tabs.forEach(function(v){
  7. v.isActive(v.view === viewName);
  8. });
  9. }
  10. }

这只是为了让您了解可能的方法.毕竟,角度和KO非常相似……大多数离子的JS组件已经在durandal中实现(例如navigation非常类似于路由和组合).

猜你在找的Angularjs相关文章