初衷

上一篇已经实现了数据的双向绑定，但model的控制范围是整个文档。在实际project中必需要有作用范围，以便做ui模块的拆分。

这一篇，我们希望实现像angularjs一样的控制器继承：

1. 父controller的Model能够在子controller里被訪问到

2. 子controller的model不影响父controller

3. controller继承关系在html中指定。而不是js中指定

目标

html里，用isi-controller属性去声明控制器：

<body>

    <div isi-controller="ParentController">

        <input data-bind="name">

        <div isi-controller="SubController">

            <input data-bind="name">

        </div>

    </div>

</body

希望上面的input name 改了。以下的会跟着变，而以下的变了，上面的不变。

js里，用和上面isi-controller属性值同名的函数定义控制器：

function ParentController() {

    var model = new Model();

    model.set('name', 'parent');

}

function ParentController() {

    var model = new Model();

    model.set('name', 'sub');

}

对用户来说，仅仅要写这些。就完事儿了。

实现

版本号1

这个版本号採用最简单直观的思路：框架去找$(‘[isi-controller]’)的元素。然后给这些元素分别去绑定监听器、运行控制器函数

代码先列了：

index.html:

<html>

  <head>

    <title>simple MVVM</title>

    <script src="js/ParentController.js"></script>

    <script src="js/SubController.js"></script>

    <script src="js/frame_v2.js"></script>

  </head>

  <body isi-controller="ParentController">

    <input type="text" data-bind="name">

    <div isi-controller="SubController">

      <input type="text" data-bind="name">

    </div>

  </body>

</html>

ParentController.js:

function ParentController() {

    var model = new Model();

    model.set('name', 'parent');

}

SubController.js:

function SubController() {

    var model = new Model();

    model.set('name','sub');

}

frame_v2.js: (对比上一篇，主要修改在绑监听器和new Model的自己主动化)

var pubsub = ... //见上一篇

var Model = ...  //见上一篇

// listener capture view changes --> publish model.change event

var changeHandler = function(event) {

    var target = event.target,

        propName = target.getAttribute('data-bind');

    if( propName && propName !== '' ) {

        pubsub.pub('model.change', propName, target.value);

    }

    event.stopPropagation();

}

/*----------- Init --------------*/

window.onload = function() {

    /* first step:

     * find controllers' dom

     */

    var controllerRanges = document.querySelectorAll('[isi-controller]');

    /* second step:

     * bind listeners for each controllers' range,

     * view.change event --> change each controllers' range

     */

    for(var i=0, len=controllerRanges.length; i<len; i++) {

        controllerRanges[i].addEventListener('change', changeHandler, false);

        // view.change event --> change view

        (function(index){

            pubsub.sub('view.change', function(propName, newVal) {

                var elements = controllerRanges[index].querySelectorAll('[data-bind=' + propName +']'),

                    tagName;

                for(var i=0,l=elements.length; i<l; i++) {

                    tagName = elements[i].tagName.toLowerCase();

                    if(tagName==='input' || tagName==='textarea' || tagName==='select') {

                        elements[i].value = newVal;

                    } else {

                        elements[i].innerHTML = newVal;

                    }

                }

            });

        })(i);

    }

     /* third step:

     * execute each controller function

     */

    for(var i=0, len=controllerRanges.length; i<len; i++) {

        var controllerName = controllerRanges[i].getAttribute('isi-controller');

        eval(controllerName+'()');

    }

}

看看效果：



悲剧了。

没有实现第二个初衷：子控制器不影响父控制器。

这个问题该怎样解决呢？

版本号二，子不影响父

细致看代码，之所以会出现故障，是由于view.change信道的作用范围是有问题的。无论哪个model发出的view.change事件，两个控制器的view都会改变。

所以，我们给公布view.change事件的时候，多公布一个控制器名。好让接收view.change的时候知道应不应该修改html:

var Model = function(controllerName) {

    var model = {

        controllerName:controllerName,

        props: {},

        set: function(propName, value) {

            this.props[propName] = value;

            pubsub.pub('view.change', propName, value, this.controllerName); //就是这里！

}

    }

控制器里new Model的时候注意把controller的名字初始化进去：

ParentController.js:

function ParentController() {

    var model = new Model('ParentController');

    model.set('name', 'parent');

}

最后接收view.change信道消息的时候，推断下controllerName:

pubsub.sub('view.change', function(propName, newVal, controllerName) {

                ....

                thisControllerName = controllerRanges[index].getAttribute('isi-controller'),

                if(thisControllerName !== controllerName)

                    return;

                ....

}

当然。监听器公布model.change的时候也是一样。要把控制器名称公布出去。代码就不贴了。

再看看效果：



妥了

全部代码：

github/victorisildur

很easy的js双向绑定框架（二）：控制器继承的更多相关文章

  1. Vue.js双向绑定的实现原理和模板引擎实现原理（##########################################）

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  2. Vue.js双向绑定的实现原理

    Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...

  3. Vue.js双向绑定原理

    Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...

  4. vue.js双向绑定之--select获取text

    在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...

  5. js 双向绑定

    //双向绑定实例 <input name="" ng-bind-123="name" /> function DataBinder( object_ ...

  6. Angular js 双向绑定时字符串的转换成 数字类型的问题

    问题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <scrip ...

  7. js 双向绑定数据

    let aaa = []; let bbb = [1,2,3]; let ccc = [0,9,8]; aaa = bbb; //此时aaa与bbb被绑定(aaa指向bbb的指向) ,若使用push则 ...

  8. js双向绑定和地址传递带来的痛苦解决方案之对象拷贝

    function cloneObj(obj) { var newObj = {}; if (obj instanceof Array) { newObj = []; } for (var key in ...

  9. node.js面向对象实现（二）继承

    http://blog.sina.com.cn/s/blog_b5a53f2e0101nrdi.html 继承是面向对象中非常重要的一个概念,那么在Node.js中如何实现继承呢? node.js在u ...

随机推荐

  1. VUE -- Vue.js每天必学之计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  2. Centos7.4 建站系统和软件版本搭配

    一.系统和软件版本搭配 版本: 1.1.2 类型: 建站系统 适用于: Centos7.4 64bit 集成软件版本: nginx_versi=1.12.2 PHP=7.1.13 (已提供提供Zend ...

  3. MooseFS分布式文件系统介绍及安装教程详解

    MFS系统由4个部分构成:master.metalogger.chunkserver.client. 1.Master —— mfs的大脑,记录着管理信息,比如:文件大小,存储的位置,份数等,和inn ...

  4. Android App引导页这些坑你自己犯过吗？

    场景:測试机:华为荣耀6x 今天我自己掉入一个非常蠢蠢的坑,一个引导页搞了20多分钟.无论我怎么測试用真机还是模拟器都无法执行,可是我写的demo全然没问题,好无语,我都怀疑我是不是搞android, ...

  5. Android之——获取手机安装的应用程序

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47114331 前几篇有关Android的博文中.向大家介绍了几个项目中经常使用的有 ...

  6. Unity 导出切片精灵

    http://blog.csdn.net/akof1314/article/details/38845933 设有一张png/tga图集,导入到Unity,放置目录"Assets/Resou ...

  7. World Wind Java开发之三 显示状态栏信息

    先来看下本篇博客索要达到的效果: 找到源代码下的gov.nasa.worldwind.util下的StatusBar.java文件,能够看到状态栏显示的信息主要包含视点高度以及相应空间点三维坐标以及是 ...

  8. Photoshop之学习笔记(2) - 常用快捷键

    1.1024x768常用桌面分辨率2.点阵图(像素图).矢量图3.PPI 分辨率  DPI 打印输出的分辨率4.选框工具5.拾色器(默认H恢复色条 色相)6.Ctrl+D 取消选框工具7.Ctrl+S ...

  9. GDB基本命令(整合)（转）

    directory:添加源文件目录 l src.cpp:line_num可进入文件 如:l src.cpp:10 回车自动重复上一命令 一.gdb调试基本知识a.调试器指示的是将要执行的代码行b.只有 ...

  10. C++常考面试题汇总(持续更新中)

    c++面试题 一 用简洁的语言描述 c++ 在 c 语言的基础上开发的一种面向对象编程的语言: 应用广泛: 支持多种编程范式,面向对象编程,泛型编程,和过程化编程:广泛应用于系统开发,引擎开发:支持类 ...