<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="divContent">
{{name}}:{{age}}<span>{{address}}</span>
<div class="li">
<input type="text" value="name" />
<input type="text" />
<input type="button" dx-click="add" value="增加组" />
</div>
<div>
<span>{{age}}</span>
</div>
<div>
<span>{{age}}</span>
</div>
<div dx-for="item in list">
<div>{{item.name}}</div>
</div>
</div>
<script>
/***
作者博客:http://blog.csdn.net/long5305350
***/
var Dx = {};
Dx.Events = {
on: function (name, handler, one) {
if (!this._events) {
this._events = {};
}
if (object_common.isObject(name)) {
for (var n in name) {
this.on(n, name[n], one);
}
return this;
}
var events = this._events[name] = this._events[name] || [];
if (one) {
handler = (function (name, handler) {
return function onehandler() {
handler.apply(this, arguments);
this.off(name, onehandler);
}
}(name, handler));
}
events.push(handler);
return this;
},
one: function (name, handler) {
this.on(name, handler, true);
return this;
},
off: function (name, handler) {
if (!this._events) return this;
if (!name) {
this._events = {};
}
else if (name && !handler) {
this._events[name] = [];
} else {
var events = this._events[name] || [], newEvents;
for (var i = events.length - 1; i >= 0; i--) {
if (events[i] == handler) {
events.splice(i, 1);
}
}
}
return this;
},
trigger: function (name) {
if (!this._events) return this;
if (!name) {
for (var name in this._events) {
this.trigger(name);
}
return this;
}
var i, len, result, events = this._events[name] || [], args = ARRAY_CORE.slice.call(arguments, 1), allevents = this._events.all || [];
events = events.slice();
allevents = allevents.slice();
for (i = 0, len = events.length; i < len; i++) {
if (typeof events[i] == "function") {
result = events[i].apply(this, args);
if (result === true) {
return true;
}
}
}
args = [name].concat(args);
for (i = 0, len = allevents.length; i < len; i++) {
if (typeof allevents[i] == "function") {
allevents[i].apply(this, args);
}
}
return this;
}
};
var ARRAY_CORE = [],
OBJECT_CORE = {},
array_common = {},
object_common = {};
["pop", "push", "reverse", "shift", "unshift", "slice", "splice", "sort", "filter", "forEach", "some", "every", "map", "indexOf", "lastIndexOf", "reduce", "reduceRight", "copyWithin", "find", "findIndex", "fill", "includes", "entries", "keys", "concat"].forEach(function (name) {
array_common[name] = wrapFunc(ARRAY_CORE[name]);
});
["isArray", "from", "of"].forEach(function (name) {
array_common[name] = Array[name];
});
["hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "toString"].forEach(function (name) {
object_common[name] = wrapFunc(OBJECT_CORE[name]);
});
["assign", "create", "freeze", "getOwnPropertyDescriptor", "getOwnPropertyNames", "getOwnPropertySymbols", "is", "isExtensible", "isFrozen", "isSealed", "keys", "preventExtensions", "seal", "defineProperty", "defineProperties", "getPrototypeOf", "setPrototypeOf"].forEach(function (name) {
object_common[name] = Object[name];
});
["Object", "Array", "Function"].forEach(function (name) {
object_common["is" + name] = wrapFunc(function () {
return object_common.toString(this) == "[object " + name + "]";
})
});
function wrapFunc(func) {
return function (data) {
return func.apply(data, ARRAY_CORE.slice.call(arguments, 1));
}
}
function Subscribe() { }
Subscribe.prototype.__proto__ = Dx.Events;
// 创建一个
function DepSubscribe() {
this.path = "";
this.subscribe = new Subscribe();
}
object_common.assign(DepSubscribe.prototype, {
on: function (name, handler) {
name = name == "*" ? "all" : name + ".change";
this.subscribe.on(name, handler);
},
trigger: function () {
var args = array_common.from(arguments);
args[0] = this.getPath(args[0]);
if (this.getPath() == "") {
args[0] = args[0] + ".change";
}
this.subscribe.trigger.apply(this.subscribe, args);
},
triggerArray: function (name, args) {
this.trigger.apply(this, array_common.concat([name], array_common.from(args)))
},
off: function () {
this.subscribe.off.apply(this.subscribe, arguments);
},
_listernerData: function (subscribe) {
var that = this;
subscribe.on('*', function (name) {
that.trigger.apply(that, arguments);
});
},
newSubscribe: function (name) {
var subscribe = new DepSubscribe();
subscribe.path = name;
this._listernerData(subscribe);
return subscribe;
},
getPath: function (name) {
name = name || "";
return this.path != "" ? this.path + "." + name : name;
}
});
// 创建一个访问器
function createGetterSetter(target, subscribe, name, defaultValue) {
var currentValue,
descriptor = object_common.getOwnPropertyDescriptor(target, name),
setter = descriptor && descriptor.set,
getter = descriptor && descriptor.get,
configurable = descriptor && descriptor.configurable;
if (descriptor && setter && getter || descriptor && !configurable) {
return;
}
function setValue(value) {
if (object_common.isObject(value)) {
currentValue = ObserverObject(value, subscribe.newSubscribe(name));
} else if (object_common.isArray(value)) {
currentValue = ObserverArray(value, subscribe.newSubscribe(name));
} else {
currentValue = value;
}
}
observedata.zip （1个子文件） 
observedata.html 15KB资源评论
weixin_379027332017-03-14dom中写了dx-click="add"的方法，但是js中没有实现- Jan简-坏小子2016-08-25很实用 非常感谢~~~
博智诚信2017-12-08很实用 非常感谢~~~
GiaHimYuan2018-03-21简单明了的MVVM实现例子。- BushiKelian2019-01-30先下过来，等会在看
