文档章节

JS实现数据双向绑定

marjey
 marjey
发布于 2016/12/08 13:08
字数 685
阅读 20
收藏 1
/**
 * 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;

};

© 著作权归作者所有

共有 人打赏支持
上一篇: nio服务器端
下一篇: 正则表达式
marjey
粉丝 3
博文 173
码字总数 139219
作品 0
昆明
私信 提问
angular js 自学笔记(一)

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

烽穹寒渊
2015/03/09
0
0
Git@OSC 项目推荐 —— bingoJS 前端框架,文档巨详细

大家经常吐槽国内很多开源项目文档非常简陋,不少项目的确如此,包括我自己的项目,有时候就是给自己很多借口,懒得去完善文档。 但是今天在 Git@OSC 上看到 bingoJS 这个项目,着实让我非常...

红薯
2015/06/05
7.7K
35
JavaScript 实现简单的双向数据绑定

双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个user对象和一个name属性,一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了...

aiasfina
2013/07/08
24.2K
5
收藏好这篇,别再只说“数据劫持”了

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

VanMess
2018/05/08
0
0
说说 Vue.js 中的 v-model 指令以及如何绑定表单元素

我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。 1 基础用法 1.1 文本输入框(text) 这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上。 html: js: 效果...

deniro
2018/12/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

全面理解Java内存模型(JMM)及volatile关键字

理解Java内存区域与Java内存模型 Java内存区域 Java虚拟机在运行程序时会把其自动管理的内存划分为以上几个区域,每个区域都有的用途以及创建销毁的时机,其中蓝色部分代表的是所有线程共享的...

亭子happy
9分钟前
0
0
Prometheus监控mysql实例--centos7安装mysql_exporter

目录 概述 环境准备 普罗米修斯简介 mysql安装 mysqld_exporter安装 启动参数列表 概述 prometheus(普罗米修斯) 是一个开源系统监控和报警工具包,许多公司和组织都采用了Prometheus,该项目...

java_龙
14分钟前
3
0
拥有2000家门店,他如何晋升为服装界的新宠?

摘要: —— iwarm3.0加热组件、碳纳米管膜炎、管状石墨结构体...你看到并不是一款高科技电子产品,这是快鱼服饰在这个冬天推出的黑科技产品 - 智能温控羽绒服。 在竞争激烈的服装行业,快鱼...

阿里云云栖社区
16分钟前
0
0
不忘初心 砥砺前行-智和信通2018年年会报道

1月18日,智和信通以“不忘初心 砥砺前行”为主题的2018总结会议暨2019年年会在京召开。年会以总经理李少龙的讲话为开场,充分肯定了全体员工2018年的工作和成绩,并表达了公司产品智和网管平...

智和网管平台
25分钟前
0
0
NGINX api网关

以谁为师
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部