way.js - 轻量级、持久化的双向绑定JS库
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库的更多相关文章
- 原生js实现数据的双向绑定
原生js实现数据的双向绑定 需要了解的属性是原色js的Object.definePrototype(obj,pop,descript); obj:被构造的对象 pop:被构造的对象的属性,创建对象或修 ...
- 通过原生js实现数据的双向绑定
通过js实现数据的双向绑定 : Object.defineProperty了解 语法: Object.defineProperty(obj, prop, descriptor) obj 要定义属性的对 ...
- VUE JS 使用组件实现双向绑定
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...
- js实现数据视图双向绑定原理
这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.observe也被草案发起人撤回了..所以defineProperty更有必要了解一下了几行代码看他 ...
- Vue.js学习 Item4 -- 数据双向绑定
Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- 前端MVVM框架avalon揭秘 - 双向绑定原理
avalon大家可能不熟悉,但是Knockout估计或多或少听过用过,那么说说KO的几个概念 监控属性(Observables)和依赖跟踪(Dependency tracking) 声明式绑定(Dec ...
- 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
随机推荐
- ASP.NET MVC 必须设置 ErrorMessageString 或 ErrorMessageResourceName,但不能同时设置二者。
解决方案: 1.此错误是指你的验证错误信息为空(required="")和required提示信息一致,引发的错误. 简单的来说就是两个验证错误提示消息一样了. 2.修改提示消息解 ...
- Internet Download Manager 6.27.1 中文特别版(IDM)
软件介绍: 软件名称:Internet Download Manager(IDM) 软件大小:5.09M软件语言:简体中文 软件官网:http://www.internetdownloadmanage ...
- Win10 PC一周年更新正式版14393.447 32位/64位更新补丁KB3200970下载 Flash补丁Kb3202790下载
微软在今天凌晨推送了Win10 PC一周年更新正式版14393.447,本次更新补丁代号为KB3200970,面向Win10一周年更新正式版的PC用户. 更新日志 • 提升了多媒体音频.远程桌面以及I ...
- mui消息框alert,confirm,prompt,toast
<script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeB ...
- bzoj2086【Poi2010】Blocks
因为long long还有PE的事WA了一下午TAT 考虑一段可行区间的平均值肯定>=k 也就是说将每个数减去k以后,一段可行区间的和非负,求一段最长区间. 一段区间的和肯定是两个前缀和的差 先 ...
- myeclipse给项目改了名字,但部署tomcat的项目名还是原来的
如标题所示: 在myeclipse中按F2改了项目名称,之前在tomcat中部署的名称是另一个,再次重新部署,永远是上一个的旧名称 解决办法: 项目点右键-properties-左上角搜索框输入web ...
- 原生JS常用代码汇总
数组相关 var codes = new Array( ); //创建数组codes.length //数组长度 动态插入数组 codes.push(value);
- 使用 JavaScript 实现简单候选项推荐功能(模糊搜索)【收藏】【转】
当我们使用 Google 等搜索功能时,会出现与搜索内容有关的候选项.使用 JavaScript 搜索字符串,通常会使用 indexOf 或者 search 函数,但是非常僵硬,只能搜索匹配特定词语. ...
- tyvj1089 smrtfun
背景 广东汕头聿怀初中 Train#2 Problem3 描述 现有N个物品,第i个物品有两个属性A_i和B_i.在其中选取若干个物品,使得sum{A_i + B_i}最大,同时sum{A_i},s ...
- 清北学堂模拟赛day7 数字碰撞
/* clj:水题别人都满分你不是你就完了,所以说水题一定要细心一点,有这么几个细节:①前导零的处理,全是零的时候要特判②换行要注意,不要多大一行,剩下就是水水的模拟了 */ #include< ...