很easy的js雙向綁定框架（二）：控制器繼承
初衷
上一篇已經實現了數據的雙向綁定，但model的控制範圍是整個文檔。在實際project中必需要有作用範圍，以便做ui模塊的拆分。
這一篇，我們希望實現像angularjs一樣的控制器繼承：
1. 父controller的Model能夠在子controller裏被訪問到
2. 子controller的model不影響父controller
3. controller繼承關系在html中指定。而不是js中指定
目標
html裏，用isi-controller屬性去聲明控制器：
<body>
<div isi-controller 希望上面的input name 改了。以下的會跟著變，而以下的變了，上面的不變。
js裏，用和上面isi-controller屬性值同名的函數定義控制器：
function ParentController 對用戶來說，僅僅要寫這些。就完事兒了。
實現
版本號1
這個版本號採用最簡單直觀的思路：框架去找$(‘[isi-controller]’)的元素。然後給這些元素分別去綁定監聽器、運行控制器函數
代碼先列了：
index.html:
<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雙向綁定框架（二）：控制器繼承