文档章节

JS实现数据双向绑定

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

};

© 著作权归作者所有

共有 人打赏支持
marjey
粉丝 2
博文 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
基于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

没有更多内容

加载失败,请刷新页面

加载更多

gson1.7.1线程并发导致空指针问题

java.lang.NullPointerExceptionat com.google.gson.FieldAttributes.getAnnotationFromArray(FieldAttributes.java:231)at com.google.gson.FieldAttributes.getAnnotation(FieldAttribut......

东风125
35分钟前
1
0
以太坊RPC接口使用

以太坊RPC接口文档: https://github.com/ethereum/wiki/wiki/JSON-RPC#web3_clientversion 使用方式: 比如我要调用某个合约的balanceOf(address _owner)方法。 因为没有改变合约的状态,所以...

王坤charlie
今天
2
0
C#下的一个好用的日历库(sxtwl_cpp),支持农历转公历,和公历转农历等功能

sxtwl_cpp是寿星天文历的C++版本实现。支持多种语言的绑定 代码首页 懒人包 懒人包使用方法 1、右链工程中的引用-》添加引用-》浏览-》选中dotnet目录下的sxtwl.net.dll 2、生成解决方案-》找...

元谷
今天
1
0
C++基础知识

链接:https://zhuanlan.zhihu.com/p/38399566 本文主要提一下以下三个区别: 引用必须初始化,而指针可以不初始化。 我们在定义一个引用的时候必须为其指定一个初始值,但是指针却不需要。 ...

悲催的古灵武士
今天
1
0
Oracle备份脚本,保留10天数据

@echo off echo 删除10天前的备分文件和日志forfiles /p "D:\oracleback\backfile" /m *.dmp /d -10 /c "cmd /c del @path" forfiles /p "D:\oracleback\backfile" /m *.log /d -10......

lyle_luo
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部