Ractive 简介

最近在写一个微信编辑器，然后已经在编辑器那一块选定了CKEditor，想想觉得UEditor虽然不错，但是似乎已经很不更新了。

想想觉得编辑器这种东西，对于一般人来说还算挺常用的，但想着是不是可以作为一个LTS？？然后发现给CKEditor写写plugin，还是蛮方便的。

技术选型

选用怎样的前端框架是一个有趣的话题，我需要一个数据绑定和模板。首先，我排除了React这个框架，我觉得他的模板会给我带来一堆麻烦事。Angluar是一个不错的选择，但是考虑Angluar 2.0就放弃了，Backbone也用了那么久。Knockout.js又进入了我的视野，但是后来我发现数据绑定到模板有点难。最后选了Ractive，后来发现果然上手很轻松。

补充一句，这个框架比React诞生早了一个月，还是以DOM为核心。Ractive自称是一个模板驱动UI的库，在Github上说是下一代的DOM操作。因为Virtual Dom的出现，这个框架并没有那么流行。

Ractive是什么？

起先，这个框架是在卫报创建的用于产生新闻的应用程序。有很多工具可以帮助我们构建Web应用程序，但是很少会考虑基本的问题：HTML，一个优秀的静态模板，但是并没有为交互设计。Ractive可以将一个模板插到DOM中，并且可以动态的改变它。

下面是一个简单的Hello，World。

  <script id='template' type='text/ractive'>  <p>Hello, {{name}}!</p>   </script>  <script>  var ractive = new Ractive({    template: '#template',    data: { name: 'world' }  });   </script>

这个Hello，World和一般的MVC框架并没有太大区别，甚至和我们用的Backbone很像。

然后，让我们来看一个事件的例子：

listView = new Ractive({  el: 'sandboxTitle',  template: listTemplate,  data: {color: config.defaultColor, 'fontSize': config.defaultFontSize}       });       listView.on('changeColor', function (args) {  listView.set('color', args.color);       });

这是的on，需要你在某个地方Fire：

titleView.fire('changeColor', {color: color.toHexString()});

接着，问题来了，这和我们jQuery的on，或者React的handleClick似乎没有太大的区别。接着Component来了：

      var Grid = Ractive.extend({         isolated: false,         template: parasTemplate,         data: {         }       });        var dataValue = 5;       var category = 'category-3';        var color = config.defaultColor;        parasView = new Ractive({         el: 'parasSanbox',         template: '<Grid Style="{{styles}}" />',         components: {Grid: Grid},         data: {           styles: [             {section_style: 'border: 2px dotted #4caf50; margin: 8px 14px; padding: 10px; border-radius: 14px;', p_style: 'font-size: 14px;', color: color,  data_value: dataValue, category: category},           ]         }       });        parasView.on('changeColor', function(args) {         parasView.findComponent('Grid').set('Style.*.color', args.color);       });

上面是在 https://github.com/phodal/congee 中用到的多个模板的View，他们用了同一个component。

好吧，说实在的它并没有什么神奇之处。这些功能React都有了，而且它还没有Angluar强大。但是，我们可以使用模板，HTML模板。而这是我们最需要的场景，而且不需要抛弃现有的代码。