前往顾页
以后地位: 主页 > 收集编程 > 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号令便可以建好一个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等,有种号令空间的感受。如果你想让某模块不主动加载的话,可以设置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
------分开线----------------------------
保举内容
猜你感兴趣