文档章节

JS实现数据双向绑定

marjey
 marjey
发布于 2016/12/08 13:08
字数 685
阅读 19
收藏 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
收藏好这篇,别再只说“数据劫持”了

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

VanMess
05/08
0
0
说说 Vue.js 实例及数据绑定能力

1 创建实例 通过 Vue() 构造函数就可以创建一个 Vue 的根实例: 1.1 el 选项 el 选项用于绑定页面中的某个 DOM 元素。它可以是 HTMLElement 或是 CSS 选择器。 在上例中: HTMLElement 方式为...

deniro
09/23
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.js 3.0 新特性预览

Evan You(尤雨溪)(2018年11月16日)前几日的早上在 Vue Toronto 的主题演讲中预演了 Vue 3 。 利用现代浏览器支持的新功能,Vue 3 将成为我们已经了解和喜爱的 Vue.js 强大的的改进版本。...

我的卡
13分钟前
1
0
Mybatis自带连接池阅读

1、数据源初始化,初始化入口由SqlSessionFactoryBuilder.build(InputStream inputStream, String environment, Properties properties)方法提供 public SqlSessionFactory build(InputStre......

jcc_codingBoy
19分钟前
1
0
Oracle 数据库勒索病毒 RushQL 处理办法

Oracle 数据库勒索病毒 RushQL 处理办法 办法来自Oracle 官方: https://blogs.oracle.com/cnsupport_news/%E5%AF%B9%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9A%84%E2%80%9C%E6%AF%94%E7%89%B9%E5%......

rootliu
19分钟前
2
0
聊聊flink LocalEnvironment的execute方法

序 本文主要研究一下flink LocalEnvironment的execute方法 实例 final ExecutionEnvironment env = ExecutionEnvironment.getExecutionEnvironment(); DataSet<RecordDto>......

go4it
22分钟前
1
0
Spring Boot中对自然语言处理工具包hanlp的调用详解

概 述 HanLP 是基于 Java开发的 NLP工具包,由一系列模型与算法组成,目标是普及自然语言处理在生产环境中的应用。而且 HanLP具备功能完善、性能高效、架构清晰、语料时新、可自定义的特点,...

左手的倒影
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部