Ractive 简介

jopen 8年前

 

最近在写一个微信编辑器，然后已经在编辑器那一块选定了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模板。而这是我们最需要的场景，而且不需要抛弃现有的代码。