LOADING

Ractive.js
美国
程序代码 框架/库

Ractive.js

一个 JavaScript Dom操作库

爱站权重:PC 百度权重移动 百度移动权重
其他站点: GitHub

Ractive 是一个 JavaScript 库,用于以不强迫用户进入特定框架的思维方式的方式构建反应式用户界面。它采用了完全不同的 DOM 操作方法-节省了用户和浏览器不必要的工作。它实现了数据绑定、DOM实时更新、模板、事件处理等多个有用的功能,它专注于UI层,学习成本低

功能:

  • 数据绑定,具有漂亮的声明性语法。
  • 使用户在进行事件处理不会费劲。
  • 灵活而高效的动画和过渡

一、hello world

首先创建一个index.html,引入ractive.js,并添加一个容器元素来渲染模板:

<body>
    <div id='container'></div>
    <script src='Ractive.js'></script>
</body> 

编写模板并实例化一个Ractive对象

    <div id='container'></div>

    <script id='template' type='text/ractive'>
        <h1></h1>
    </script>
    <script src='ractive.js'></script>
    <script>
    var ractive = new Ractive({
        el: 'container',
        template: '#template',
        data: { name:"Hello world"}
    });
    </script>

二、数据的更新

ractivejs数据的更新类似set、get存取器,通过set来更新数据,通过get来获取数据,例如上面Helloworld的例子中,我们打开控制台输入ractive.set('name',"alibaba"),你会看到页面上会立即更新,同时我们通过ractive.get('name')可以获取当前name的值

var list = [{name:"Jim"},{name:"LUCY"},{name:"LILY"}]
var listView = new Ractive({
    el: 'container',
    template: '#template',
    data: { list:list}
});
    //修改list第一个值为sone
  listView.set('list.0.name','sone');
  //获取修改后的值
  console.log( listView.get('list') );

这里通过set('list.0.name')来动态修改数组第一个元素的name值.list.0表示数组的第一个元素.

三.数据的双向绑定

理解并掌握数据的双向绑定可以很大程度上提高我们的开发效率,不用再写那些繁琐的DOM操作代码

  <div><h2>订阅报警状态:</h2>
  <label><input type='radio' name='' value='Error' checked> red</label>
  <label><input type='radio' name='' value='Warning'> green</label>
  <label><input type='radio' name='' value='Critical'> blue</label>
  <p>当前报警状态: </p>
</div>

上面代码为模板代码,通过简单模板我们就可以实现数据的双向绑定,将数据(JavaScript对象)映射到view层,界面的操作都会同步更新数据.这里我们可以通过listView.get('status')获取当前选中状态的值,同样可以通过set方法设置值. 在看一个复选框的例子

<li><input type='checkbox' name='' value=''> </li>

在控制台执行listview.get('selected'),你会发现返回的是一个数组,包含已选择的checkbox的值.

通常双向绑定都会提供一个watch功能,在ractivejs中实现watch是observe方法,它监听绑定数据的变化,在上面的radiobox的demo上我们扩展一个功能,当选中error时,弹出一个提示框

  listView.observe('status',function(newvalue,oldvalue){
    if(newvalue==="Error"){
        alert('你选择了Error')
    }
})

observe的回调中返回newcalue与oldvalue,分别对应的是改变之后与改变之前的值.其它对绑定数据的操作例如push、splice都会触发observe

四.事件处理

使用ractivejs时,我们使用代理事件的方法,首先在模板声明代理事件,然后在js代码中订阅事件



    <li> <button on-click="del:">删除</button></li>

  <p><input type="text" value="" ><button on-click="add">添加</button></p>
  <p><button on-click="show">查看当前列表的值</button></p>
listViewevent.on({
    add:function(){
        var name = this.get('name');
        if(name.replace(/(^s*)|(s*$)/g, "").length===0){
            return
        }
        this.push('list',name);
    },
    del:function(event,index){
        this.splice('list',index,1)
    }
})

特别注意的是上面的del方法,我们传了一个index参数,这个参数表示当前数组元素的索引,这个index值是在模板中通过del:方式传进去的.同时我们可以看到,大部分逻辑都是在操作数据,ractivejs官方也提供了很多操作数据的方法.

数据统计

数据评估

Ractive.js浏览人数已经达到29,如你需要查询该站的相关权重信息,可以点击"爱站数据""Chinaz数据"进入;以目前的网站数据参考,建议大家请以爱站数据为准,更多网站价值评估因素如:Ractive.js的访问速度、搜索引擎收录以及索引量、用户体验等;当然要评估一个站的价值,最主要还是需要根据您自身的需求以及需要,一些确切的数据则需要找Ractive.js的站长进行洽谈提供。如该站的IP、PV、跳出率等!

关于Ractive.js特别声明

本站东辰资源网提供的Ractive.js都来源于网络,不保证外部链接的准确性和完整性,同时,对于该外部链接的指向,不由东辰资源网实际控制,在2021年10月17日 上午11:49收录时,该网页上的内容,都属于合规合法,后期网页的内容如出现违规,可以直接联系网站管理员进行删除,东辰资源网不承担任何责任。

相关导航

暂无评论

暂无评论...