RactiveJS-01 Hello Ractive

最新推荐文章于 2022-03-29 21:48:09 发布

「已注销」

最新推荐文章于 2022-03-29 21:48:09 发布

阅读量830

点赞数

分类专栏： Ractive 文章标签：库 Ractive

本文链接：https://blog.csdn.net/duola8789/article/details/70135798

版权

Ractive 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

参考

http://www.sokis.org/2015/05/从零开始学ractivejs-系列（一）/
http://www.ractivejs.org/60-second-setup

前言

RactiveJS是一个模板驱动的UI库，融入了很多Backbone的元素，。但又与Backbone不同，它有自己的Two-way binding引擎。而Backbone 却需要插件支持。

RactiveJS 内置了基本的选择器模块，Template引擎，封装的Event，Node等对象。

Two-way binding (双向绑定) 也就是大家常说的 MVVM 或者 MV* 什么的。

貌似和react是两种不同的东西，但是和angularjs有相似之处。

这一系列主要是翻译自官网，现在用Ractive人的好像也不多，但是没办法，加入的这个项目就是用它，还是硬着头皮上吧。

Hello Ractive

来自官网的60s上手指南：（貌似ractive用的人不多，中文文档非常少，还是需要习惯阅读英文文档）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2-Ractive</title>
    <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>
</head>
<body>
    <h1>This is Ractive Test</h1>
    <div id="container"></div>
    <script type="text/ractive" id="template">
    <p>{{greeting}}, {{name}}!</p>
    </script>

    <script>
        var ractive = new Ractive({
          el : '#container',
          template : '#template',
          data : {name : 'ractive',greeting: 'hello'}
        })
    </script>
</body>
</html>

首先需要引入ractive的库文件（最新的稳定版本是0.73）：

<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

RactiveJS需要一个模板，将输入传入模板，再将模板渲染到指定的html文档中。RactiveJS支持字符串或者script text 类型的容器。（只要type不等于text/javascripe即可）

<script type="text/ractive" id="template">
    <p>{{greeting}}, {{name}}!</p>
</script>

然后进行双向绑定（two-way-binding），必须使用new字符构造一个Ractive对象，其中：
- el是要模板要插入的容器，可以使用节点、ID或者CSS选择符指定容器
- template是要被插入的模板，可以是一个选择器，一段文本。或RactiveJS （Ractive.parse()）预编译的模板对象
- data是需要绑定的数据源，也就是要传入到模板之中的数据对象，在data里面指定的变量可以随意在template随意使用

<script>
    var ractive = new Ractive({
        el : '#container',
        template : '#template',
        data : {name : 'ractive',greeting: 'hello'}
    })
</script>

下面的指令可以实时更改传入模板的name的值

ractive.set('name', "tom")
ractive.set('greeting', "bye")

Ractive与其他模板库的不同之处在于数据更新是局部的，对于通常的模板库，如果想要更改模板的数据，需要对整个视图进行重新渲染，也就意味着你需要删除所有已经创建的DOM节点，这是对内存的极大浪费。

在Ractive中，我们可以操作已经创建的视图，实现数据的局部更新。在数据set的过程中，RactiveJS会将

标签中的内容分成四个节点：

{{greeting}}
空格
{{name}}
!

Ractive会将这四个节点对应的变量的引用缓存起来，当数据改变时则重新计算对应节点的变量值，而不改变其他无关节点。精确地改变文本节点的值比替换元素节点的速度快很多，尤其是在局部更改数据时。

更改元素属性

ReactiveJS可以通过类似的方式更改元素的属性：

<p style='color: {{color}}; font-size: {{size}}em; font-family: {{font}};'>
  {{greeting}} {{name}}!
</p>

在渲染时只要增加对应的数据即可：

var ractive = new Ractive({
  el: output,
  template: template,
  data: {
    greeting: 'Hello',
    name: 'world',
    color: 'purple',
    size: 4,
    font: 'Georgia'
  }
});

也可以通过set更改元素的属性：

ractive.set({
  color: 'red',
  font: 'Comic Sans MS'
});

主要注意的是，上面的代码虽然更改了元素的三个特性，但是Reactive认为它们都属于一个属性，所以只对DOM进行了一次更改。

获取数据

前面提到了，Ractive通过set可以设置变量值，同样，通过get可以获取变量值：

<body>
    <div id="container"></div>
    <script type="text/ractive" id="template">
    <button id='count'>Times this button has been clicked: {{counter}}</button>
    </script>

    <script>
        var ractive1 = new Ractive({
          el : '#container',
          template : '#template',
          data : {
            'counter' : 0
          }
        });
        var button = document.getElementById('count');
        button.addEventListener('click', function(){
          ractive1.set('counter', ractive1.get('counter') + 1)
        })
    </script>
</body>

上面的代码中，增加counter变量并初始化为0，在通过get获取该变量的值，并为按钮添加时间，实现点击计数的功能。

传统的模要实现上述功能可能会更复杂，需要在每次点击后移除后再重新插入button，并且需要每次手动绑定、解绑事件，或者通过时间代理实现，相比Ractive来说这些其实都不是必须的。

使用外部template文档

可以使用nodeJS的require和exports来实现
使用ajax实现，但是要注意ajax的异步执行：

<script>
    $.ajax({
        url : 'test2.tpl',
        dataType : 'html',
        async :false,
        success : function(data){
            var ractive = new Ractive({
                el : '#container',
                template : data,
                data:{
                    jays : [111,222,333],
                    jay : this[0]

                }
            });
        }
    });
</script>