Ractive 簡介

mrli2016 發布于2019-08-21 10:46 / 766人閱讀

摘要：最近在寫一個微信編輯器，然后已經在編輯器那一塊選定了，想想覺得雖然不錯，但是似乎已經很不更新了。補充一句，這個框架比誕生早了一個月，還是以為核心。自稱是一個模板驅動的庫，在上說是下一代的操作。下面是一個簡單的，。

最近在寫一個微信編輯器，然后已經在編輯器那一塊選定了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模板。而這是我們最需要的場景，而且不需要拋棄現有的代碼。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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