AngularJS的双向绑定一直为人称道,但使用AngularJS需要对页面组件化,学习成本还是很高的。

本文源自 https://github.com/gwendall/way.js 边学边译。

使用:引用一个js文件即可。

<script src="way.min.js"></script>

way.js.  官方JS脚本 点击下载

开始:

声明一个HTML元素和一些标记

 <form way-data="myFormData" way-persistent="true">
<input type="text" name="name">
<input type="text" name="age">
<input type="text" name="gender">
</form> Name: <span way-data="myFormData.name"></span>

现在每一个变化将存储内存。绑定跨度的html将被改变。和绑定数据将持续,这意味着你的HTML会填充你的页面重新加载数据。

文档:

 
名称 类型 默认值 描述
data string null 允许定义点分离路径数据将存储的地方。可以包括数组。当表单上使用时,一个json变量包括所有的输入了一个[名字]属性将被创建并存储在指定的存储。通过“__all__”路径访问所有的way.js的数据。
default strign null 如果没有绑定值,链接的默认数据设置一个元素.
       
       
       
       
       
       
       

way.js - 轻量级、持久化的双向绑定JS库的更多相关文章

  1. 原生js实现数据的双向绑定

    原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...

  2. 通过原生js实现数据的双向绑定

    通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...

  3. VUE JS 使用组件实现双向绑定

    1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...

  4. js实现数据视图双向绑定原理

    这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他 ...

  5. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

  6. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  7. 前端MVVM框架avalon揭秘 - 双向绑定原理

    avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...

  8. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  9. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

随机推荐

  1. memcached

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...

  2. nginx文件管理

    管理文件下载nginx 可以自己实现,无需写代码即可: 修改配置文件: location /doc { autoindex on; autoindex_exact_size on; autoindex ...

  3. SVN集中式版本控制器的安装、使用与常见问题汇总

    SVN是Subversion的简称,是一个开放源代码的版本控制系统,它采用了分支管理系统,集中式版本控制器 官方网站:https://www.visualsvn.com/ 下载右边的服务器端,左边的客 ...

  4. COGS461. [网络流24题] 餐巾

    [问题描述] 一个餐厅在相继的N天里,第i天需要Ri块餐巾(i=l,2,…,N).餐厅可以从三种途径获得餐巾. (1)购买新的餐巾,每块需p分: (2)把用过的餐巾送到快洗部,洗一块需m天,费用需f分 ...

  5. Node.js入门笔记(2):全局对象(1)

    以下将以API文档为基础进行分析学习 global对象 这些对象在所有模块里都可用.有些对象不是在全局作用域而是在模块作用域里,这些情况下面文档都会标注出来. __filename--返回当前模块文件 ...

  6. XMPP开发环境配置

    首先配置XMPP开发环境配置需要的软件 先安装xampp-osx-1.8.3-5-installer.dmg 安装成功后launchpad里会多出一个XAMPP(其他),点开里面的manager-os ...

  7. tyvj1102 单词的划分

    描述 有一个很长的由小写字母组成字符串.为了便于对这个字符串进行分析,需要将它划分成若干个部分,每个部分称为一个单词.出于减少分析量的目的,我们希望划分出的单词数越少越好.你就是来完成这一划分工作的. ...

  8. T-SQL实用查询之分析数据库表的大小

    IF OBJECT_ID('tempdb..#TB_TEMP_SPACE') IS NOT NULL DROP TABLE #TB_TEMP_SPACE GO CREATE TABLE #TB_TEM ...

  9. mplayer-1.3.0-2016-09-01.7z

    鼠标右键 快速定位 左SHIFT 记录开始时间 左CTRL 记录结束时间 右CTRL 复制开始结束时间 00:00:00.000 00:00:00.000 右SHIFT 生成视频剪切命令保存到 _cu ...

  10. Oracle 过程中检查数据表存在与否

    在过程中,尤其是每天执行的任务,通常要检查查询的数据表存在不存在,如果不存在则等待一段时间在进行执行,以下代码实现了这个功能,如果表不存在,抛出异常,交给异常处理代码,确保数据完整性 使用方法:p_C ...