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模板。而这是我们最需要的场景，而且不需要抛弃现有的代码。