文档章节

JS实现数据双向绑定

marjey
 marjey
发布于 2016/12/08 13:08
字数 685
阅读 17
收藏 1
点赞 0
评论 0
/**
 * input标签的包装类。
 * */
if (typeof priv == "undefined") {
    var priv = {};
}
if (typeof  priv.lee == "undefined") {
    priv.lee = {};
}
/**
 * input标签的包装对象,可对input对象进行一系列操作。
 * 返回inputbox对象为具体操作对象。
 *
 * */
priv.lee.inputbox = function (boxName, boxNameCode) {
    var inputbox = {};
    inputbox.dataBinding = {value: '', watcher: {}};

    /**
     * 新建一个div,div里面存放input名和输入框。
     * */
    var getInputDiv = function () {
        inputbox.div = $('<div></div>');
        inputbox.text = $('<label>' + boxName + '</label>');
        inputbox.inputBox = $('<input type="text" name="' + boxNameCode + '" />');
        inputbox.div.append(inputbox.text);
        inputbox.div.append(inputbox.inputBox);
    };
    getInputDiv();
    /**
     * input标签change的绑定事件。首先获取change事件。
     * */
    var bindingChangeEvent = function () {
        inputbox.inputBox.change(function () {
            watcher.getNotify(inputbox.getContent());
        })
    };
    bindingChangeEvent();
    /**
     * 获取输入框内的值。
     * */
    inputbox.getContent = function () {
        return inputbox.inputBox.val();
    };
    /**
     *给输入框内赋值。
     * */
    inputbox.setContent = function (value) {
        inputbox.inputBox.val(value);
    };
    /**
     * 刷新输入框,传入什么数据就在输入框显示什么数据。
     * */
    var renovateContent = function (data) {
        inputbox.setContent(data);
    };
    /**
     *获取数据绑定对象。
     * 该对象为每个input标签对象专门用于数据绑定操作的对象。
     * */
    inputbox.getDataBindingObj = function () {
        return inputbox.dataBinding;
    };

    /**
     * 数据绑定对象获取监听器。当有任何操作的时候会通知监听器
     * */
    inputbox.dataBinding.setWatcher = function (watcher) {
        inputbox.dataBinding.watcher = watcher;
    };
    /**
     *外界传入数据给数据绑定的对象。
     * 调用设置值之后,会触发刷新输入框的方法。
     * */
    inputbox.dataBinding.setValue = function (val) {k
        inputbox.dataBinding.value = val;
        renovateContent(val);

    };
    /**
     * 外界获取数据绑定的对象。
     * 首先从输入框中获取值到数据绑定的value属性中保存,然后返回绑定对象的value。
     * */
    inputbox.dataBinding.getValue = function () {
        inputbox.dataBinding.value = inputbox.inputBox.val();
        return inputbox.dataBinding.value;
    };
    /**
     * 数据绑定法神变化的时候
     * */
    /**
     * 将数据绑定的对象dataBinding和input标签中的内容向关联。
     * 在一次操作中,实现标签中的值赋给dataBinding或者将dataBinding中的值传到标签显示。
     * */
    inputbox.dataBinding.bindingContent = function () {

    };
    return inputbox;
};
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../js/priv.lee.inputbox.js"></script>
    <script src="../js/priv.lee.databinding.js"></script>
</head>
<body>
<script>
    var one = priv.lee.inputbox("第一个", 'one');
    var two = priv.lee.inputbox('第二个', 'two');
    $(document.body).append(one.div);
    $(document.body).append($('<br/>'));
    $(document.body).append(two.div);

    var watcher = priv.lee.databinding();
    var onesBinding = one.getDataBindingObj();
    var twosBinding = two.getDataBindingObj();
    onesBinding.setWatcher(watcher);
    twosBinding.setWatcher(watcher);
    watcher.setFirstBindingData(onesBinding);
    watcher.setSecondBindingData(twosBinding);
</script>
</body>
</html>
/**
 *数据绑定,获取两个数据,绑定之后任意一个数据变化,另一个随之改变。
 * 此时是针对两个数据进行操作。现在暂时做一个绑定两个字符串的对象,输入两个对象的引用,任一个对象都跟随另一个改变。
 * */
if (typeof priv == "undefined") {
    var priv = {};
}
if (typeof  priv.lee == "undefined") {
    priv.lee = {};
}
/**
 * 定义一个监听器,用与监听事件,
 * 这个监听器需要嵌入到待监听的事件、数据或方法中。
 * */
priv.lee.databinding = function () {
    var watcher = {};
    var dataBinding = {FirstParam: {value: ''}, SecondParam: {value: ''}};
    /**
     * 通过其他对象调用监听器的通知方法。刷新dataBinding中的数据。
     * */
    watcher.getNotify = function (value) {
        dataBinding.FirstParam.setValue(value);
        dataBinding.SecondParam.setValue(value);

    };
    /**
     * 获取待绑定的第一个数据引用。
     * */
    watcher.setFirstBindingData = function (value) {
        dataBinding.FirstParam = value;
    };
    /**
     * 获取待绑定的第二个数据引用。
     * */
    watcher.setSecondBindingData = function (value) {
        dataBinding.SecondParam = value;
    };

    /**
     * 刷新绑
     * */
    return watcher;

};

© 著作权归作者所有

共有 人打赏支持
marjey
粉丝 2
博文 146
码字总数 139219
作品 0
昆明
angular js 自学笔记(一)

js中的mvc mvc设计模式,简单说来是将复杂的代码设计规范化,把应用的输入,处理,输出分开,M是指数据模型,V是指用户界面,C则是控制器。像我刚接触的SSH框架中,例如struts,就是利用mvc的...

烽穹寒渊
2015/03/09
0
0
收藏好这篇,别再只说“数据劫持”了

最近接触了一些面试者,当我问起“Vue 如何实现数据双向绑定”时,会脱口而出“数据劫持”,然后呢?然后就没有然后了╮(╯_╰)╭。确实,“数据劫持”是基础,但远不是面试官想听到的答案,...

VanMess
05/08
0
0
基于adminlte的后台管理系统开发

前言 现在的大前端技术来势凶猛,Vue&React&Angular三足鼎立,让我们这些后端开发人员瑟瑟发抖。为了开发一个内部使用的管理系统需要去学习Node&Webpack等各种新概念,况且我们的系统并没有那...

gongxufan
06/21
0
0
VC模式下javascript项目重构

项目现状 项目为单页web应用,只针对chrome浏览器,无开发文档。由于是追求进度的项目,开发约定极少,除了jquery、LAB.js、bootstrap以及一些UI组件外,没有使用其他开源组件。 项目简单封装...

lost_o0
2014/05/07
0
2
Vue学习系列一 —— MVVM响应式系统的基本实现原理

MVVM是什么 MVVM是Model-View-ViewModel的简写。它模式是MVC—>MVP—>MVVM的进化版。 Model负责用JavaScript对象表示,View负责UI界面显示,两者做到了最大限度的分离。 而把Model和View关联...

浩3108
05/23
0
0
vitual-dom原理与简单实现

前言 目前广为人知的React和Vue都采用了virtual-dom,Virtual DOM凭借其高效的diff算法,让我们不再关心性能问题,可以随心所欲的修改数据状态。在实际开发中,我们并不需要关心Virtual DOM...

B_Cornelius
07/02
0
0
Angular学习心得之directive——scope选项与绑定策略

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的。但是这显然不符...

lee1994522
2015/05/01
0
12
JavaScript 开发框架横向比对(Vue、React 和 Angular)

1 背景比对 MIT license 与 BSD-license 之间的区别是:MIT license 允许衍生软件加上我们自己的名字做推广,而 BSD license 不可以。 MVVM(Model-View-ViewModel):将其中的View 的状态和...

deniro
05/30
0
0
Vue核心思想:数据驱动、组件化

1.数据驱动 DOM是数据的一种自然映射。 传统的前端数据交互是用Ajax从服务端获取数据,然后操作DOM来改变视图;或者前端交互要改变数据时,又要再来一次上述步骤,而手动操作DOM是一个繁琐的...

blacker2018
07/03
0
0
AngularJS Directive 隔离 Scope 数据交互

什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能...

Edens_Song
2015/07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

elasticdump 备份数据导出导入

版本: elasticsearch 5.5.2 elasticdump 2.2 系统 CentOS7.3 因项目需求 从生产导出一份索引到测试 https://github.com/taskrabbit/elasticsearch-dump?utm_source=dbweekly&utm_medium=em......

雁南飞丶
3分钟前
0
0
saltstack配置目录管理

1.服务端配置 -接着编辑之前的 top.sls 文件 #vim /srv/salt/top.sls //修改为如下 base: 'slaver.test.com': - filedir -新建 filedir.sls 文件 # vim /srv/salt/filedir.sls file-dir: fi......

硅谷课堂
3分钟前
0
0
python日期时间

日期和时间 Python内建的datetime模块提供了datetime、date和time类型。datetime类型结合了date和time,是最常使用的: In [102]: from datetime import datetime, date, timeIn [103]:...

火力全開
10分钟前
0
0
你不了解的v-show

vue指令v-show的使用 1、判断谋个元素是否显示或隐藏 <el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">去上传<i class="el-icon-upload el-icon--r......

不负好时光
11分钟前
0
0
网站从一万到亿级流量的全景描述

故事的开头 如果你一毕业参见工作就进入了大型互联网公司,那么恭喜你了,你将体验到大公司深厚的技术底蕴以及企业文化。 如果你进入到了一个初创的中小型企业,那么也恭喜你了,你将可能体会...

大大枣
11分钟前
0
0
Tomcat中JAVA JVM内存介绍、内存溢出及合理配置

一、Java JVM内存介绍 JVM管理两种类型的内存,堆和非堆。按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配。堆是在 Java 虚拟机启动时创...

學無止境
12分钟前
0
0
centOS7.4+nginx 1.12.2负载均衡

centOS7.4+nginx 1.12.2负载均衡 2018年04月10日 09:24:51 阅读数:58 1:参数信息 三台 centOS7.4 A,B,C A作为主服务器,B C作为分流的服务器 都搭建 nginx 1.12.2 一:安装 nginx 1:下载...

linjin200
18分钟前
0
0
分布式之抉择分布式锁

前言: 目前网上大部分的基于zookpeer,和redis的分布式锁的文章都不够全面。要么就是特意避开集群的情况,要么就是考虑不全,读者看着还是一脸迷茫。坦白说,这种老题材,很难写出新创意,博...

Java大蜗牛
23分钟前
0
0
rm: cannot remove `xxx’: Operation not permitted

rm: cannot remove `xxx': Operation not permitted可以先用lsattr xxx查看文件的隐藏属性。如果看到-----a-------的情况,可以用chattr -a xxx去除a属性,然后再进行删除就可以了....

殘留回憶
23分钟前
0
0
oracle 如何查看当前用户的表空间名称

如何查询当前用户的表空间名称?因为oracle建立索引,需要知道当前用户的表空间,查找了一下资料 --查询语法-- select default_tablespace from dba_users where username='登录用户' 如,...

youfen
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部