Ractive 简介

mrli2016 发布于2019-08-21 10:46 / 765人阅读

摘要：最近在写一个微信编辑器，然后已经在编辑器那一块选定了，想想觉得虽然不错，但是似乎已经很不更新了。补充一句，这个框架比诞生早了一个月，还是以为核心。自称是一个模板驱动的库，在上说是下一代的操作。下面是一个简单的，。

最近在写一个微信编辑器，然后已经在编辑器那一块选定了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。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86155.html

Vue.js 的一些资源索引

摘要：是刚出来的一个轻型的框架借鉴了现有的各种框架官网作者个人网站挺漂亮的作者微博尤小右作者是员工目前已经在一些项目尝试按去年月已经开始了项目项目主页是今年月上线的作者记录了上线一周的情况文档主要是在官网上非常清晰目前还是比较简短的另 Vue.js 是刚出来的一个轻型的 MVVM 框架, 借鉴了现有的各种框架, 官网 http://vuejs.org/ Github https://gith...

yacheng 2019-08-21 12:10 评论0 收藏0
前端速查表大全,分享一些技术和工具的简明教程

摘要：这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容，如编辑器的快捷键的命令行的选择器的属性等，这个列表简单收集了常用的工具，可以收藏用于平时的备忘录，需要用到的时候可以及时查阅。这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容，如编辑器的快捷键、git的命令行、jQuery的API选择器、CSS的flexbox属性等，这个列表简单收集了常用的工具，可以收藏用于平...

xiaochao 2019-08-21 17:50 评论0 收藏0
前端速查表大全,分享一些技术和工具的简明教程

摘要：这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容，如编辑器的快捷键的命令行的选择器的属性等，这个列表简单收集了常用的工具，可以收藏用于平时的备忘录，需要用到的时候可以及时查阅。这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容，如编辑器的快捷键、git的命令行、jQuery的API选择器、CSS的flexbox属性等，这个列表简单收集了常用的工具，可以收藏用于平...

avwu 2019-08-01 18:05 评论0 收藏0
前端速查表大全,分享一些技术和工具的简明教程

摘要：这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容，如编辑器的快捷键的命令行的选择器的属性等，这个列表简单收集了常用的工具，可以收藏用于平时的备忘录，需要用到的时候可以及时查阅。这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容，如编辑器的快捷键、git的命令行、jQuery的API选择器、CSS的flexbox属性等，这个列表简单收集了常用的工具，可以收藏用于平...

chunquedong 2019-08-29 13:54 评论0 收藏0
最近想通的几个单页面应用开发的重点

摘要：老实说我不是第一次想歪了而且很慢总是不能很快抓住要点当别人用后端从做博客做论坛联系完成的应用的时候我跑去学单页面应用还很久挣扎在的思路当中我想说的是走大多数人走的路的确是可以减少浪费的时间和错误的走少数人在的路当然也刺激的我最近才明白原来前老实说我不是第一次想歪了, 而且很慢, 总是不能很快抓住要点. 当别人用后端 MVC 从做博客做论坛, 联系完成 MVC 的应用的时候我跑去学单...

yibinnn 2019-08-19 14:51 评论0 收藏0