非常简单的js双向绑定框架(二):控制器继承

初衷

上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档,在实际工程中必须要有作用范围,以便做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‘);
}

对用户来说,只要写这些,就完事儿了。

实现

时间: 2024-12-11 16:47:46

非常简单的js双向绑定框架(二):控制器继承的相关文章

很easy的js双向绑定框架(二):控制器继承

初衷 上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档.在实际project中必需要有作用范围,以便做ui模块的拆分. 这一篇,我们希望实现像angularjs一样的控制器继承: 1. 父controller的Model能够在子controller里被訪问到 2. 子controller的model不影响父controller 3. controller继承关系在html中指定.而不是js中指定 目标 html里,用isi-controller属性去声明控制器: <body>

非常简单的js双向数据绑定框架(三):js model黑科技

初衷 之前我们要在js域更新model,需要这样: model.set('name', 'sub'); 这实在太土了... 我们希望像angularjs一样,直接: $scope.name = 'sub'; 然后bong, 视图就会更新!这样的黑科技必定是极好的. 目标 完成model更新黑科技 200行以内完成 实现 今次主要借鉴avalon"劫持"setter,getter的方法,链接:avalon简化版解读 虽说是简化过的avalon,还是挺难读的. 整理下思路,主要两大点: 1

Vue.js双向绑定原理

Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

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

Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少的代码实现那个hello world开篇示例. 参考文章:https://segmentfault.com/a/1190000006599500 一.访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty()方法单独定义. var obj = {

js 双向绑定

//双向绑定实例 <input name="" ng-bind-123="name" /> function DataBinder( object_id ) { // Create a simple PubSub object var pubSub = { callbacks: {}, on: function( msg, callback ) { this.callbacks[ msg ] = this.callbacks[ msg ] || [];

简单实现一个双向绑定

看了一些关于双向绑定的文章,现在来整理一下思路. 首先实现双向绑定有三个步骤: 需要一个方法来识别哪一个的view被绑定了相应的数据 需要监视数据和view的变化 需要将所有变化传播到绑定的对象和对应的view 为了解决第一个问题,要在对应的dom上添加相应的data-bind-<prop_name>属性,比如: num: <input type="number" data-bind-num> <div data-bind-num></div&

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

function cloneObj(obj) { var newObj = {}; if (obj instanceof Array) { newObj = []; } for (var key in obj) { var val = obj[key]; newObj[key] = typeof val === 'object' ? cloneObj(val): val; } return newObj;};

数据的双向绑定 Angular JS

接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> &

剖析Vue原理&amp;实现双向绑定MVVM

剖析Vue原理&实现双向绑定MVVM vue.js 双向绑定 javascript 邓木琴居然被盗用了 2016年08月16日发布 推荐 24 推荐 收藏 195 收藏,10.6k 浏览 本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完