返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

使用Ruby on Rails with Backbone.Marionette开发Web应用

时间:2014-08-23 20:43来源:知行网www.zhixing123.cn 编辑:麦田守望者

最新公司在慢慢抛弃微软的那一套东西了,先是弃用TFS,又改用GMail代替outlook,现在连.Net也要被放弃了,而改用Ruby on Rails。刚认识Ruby的时候,是各种不适应,开发工具的不适应,语法的不适应,数据库的不适应,还有操作系统的不适应(统一使用公司自己修改的Linux系统)。这一改,就可以向微软少交不少米了,这样一想,也可理解公司的做法了。
虽说Ruby性能不及某些,但使用了一段时间,也不太是个问题,自从ruby 2.1.0之后的版本,性能已经有了大幅度的提升了。其实公司更在乎的是Ruby on Rails的开发速度,很多免费好用的脚手架,几行terminal无需存款注册秒送18元就可以建好一个web站点,包括数据库,API以及UI(不过很简陋)。
那Backbone.Marionette是什么东西呢?Backone我相信做前端的同学们应该不陌生,在国内使用不多,但可以查找的相关资料还不少,在国外更流行吧。而Backbone.Marionette是Backbone的扩展,提供了比Backone更丰富的功能:

  • Application(应用)
  • Approuter (路由)
     
  • Behavior(行为)
     
  • Behaviors(行为管理)
     
  • Callbacks(回调类)
  • CollectionView(集合视图)
  • CompositeView(复合视图,同时渲染model和collection)
  • Configuration(配置类)
  • Controller(控制器,好东西)
  • Functions(一些很有用的方法)
  • ItemView(模型视图)
  • LayoutView(布局视图)
  • Module(模块类,好东西)
  • Object(强大功能的对象)
  • Region(区域类)
  • RegionManager(区域管理器)
  • Renderer(渲染器,用来指定用模板引擎)
  • Templatecache(模板缓存组件)
  • View(Backbone视图扩展类,其它视图类均继承于此)


看看这个目录,就知道很强大了吧。再在组织我们的view的时候就不再含糊了吧,一旦你给collectionView指定了 childView各 collection后,在application启动后就可以自动渲染。在整个web应用application.start()后,都是用 module来加载各模块,包括各种view,collection,model以及region,controller等,有种无需存款注册秒送18元空间的感觉。如果你想让某模块不自动加载的话,可以设置module的startWithParent的属性为false就好了。


下面来简单举一个例子来看看吧。
第一步

//声明你的应用实例,并添加一个区域
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({ mainRegion: "#content" }) ;
//声明一个模型实例
AngryCat = Backbone.Model.extend({});
//声明一个模型集合实例
AngryCats = Backbone.Collection.extend({ model: AngryCat });

再来添加两个模板

//collectionView模板
<script type="text/template" id="angry_cats-template">
    <thead> <tr class='header'> <th>Name</th> </tr> </thead>
    <tbody> </tbody>
< /script>

// childView 模板
<script type="text/template" id="angry_cat-template">
   <td><%= name ></td>
< /script>

第三步

// childView一般都为itemView
AngryCatView = Backbone.Marionette.ItemView.extend({
   template: "#angry_cat-template",
   tagName: 'tr',
   className: 'angry_cat'
});

// 复合视图继承于集合视图,拥有集合视图的全部属性
AngryCatsView = Backbone.Marionette.CompositeView.extend({
   tagName: "table",
   id: "angry_cats",
   className: "table-striped table-bordered",
   template: "#angry_cats-template",
   itemView: AngryCatView,
   appendHtml: function(collectionView, itemView){ collectionView.$("tbody").append(itemView.el); }
});

第四步

// 添加一些初始化的东东并启动应用
MyApp.addInitializer(function(options){
     var angryCatsView = new AngryCatsView({ collection: options.cats });
     MyApp.mainRegion.show(angryCatsView);
});

$(document).ready(function(){
    var cats = new AngryCats([ { name: 'Wet Cat' }, { name: 'Bitey Cat' }, { name: 'Surprised Cat' } ]);
    MyApp.start({cats: cats});
});

完工。是不是很简单?

当然我们说的是Ruby on Rails with Backbone.Marionette开发,那结合Ruby on Rails平台提供的一些快速开发的特性,会让我们写代码更快更舒服。Rails应用会默认采用CoffeeScript的预处理语言,不过你也可以直接使用JavaScript原生语言。来简单看个例子吧。

还有SASS(SCSS)等,是用来规范CSS预处理语言,支持变量,类似函数式的写法,跟比较流行的LESS很相似,但绝对胜之而无不及。

CoffeeScriptSASS(SCSS)这两种特性的东西,我就不得不佩服Ruby开发团队了,能整出这么些东西来,要花多少精力啊? 不多说了,慢慢享用吧。有时间的话,我会继续发一些关于架构的文字。。^_^

------分隔线----------------------------
标签(Tag):css
------分隔线----------------------------
推荐内容
猜你感兴趣
博聚网