支持声明式事件绑定

This commit is contained in:
张磊 2015-07-01 09:16:27 +08:00
parent be33828c6d
commit 4bab913f2a
5 changed files with 79 additions and 39 deletions

40
dist/nuclear.js vendored
View File

@ -12,9 +12,8 @@
define(function(require, exports, module){
module.exports=factory();
});
} else {
root.$ = root.Nuclear = factory();
}
root.$ = root.Nuclear = factory();
}(this, function () {
/* paste from Zepto v1.1.6 -
@ -1389,6 +1388,8 @@ Nuclear.create = function (obj) {
Nuclear._mixObj = function (obj) {
obj.ctor = function (option, selector) {
this._ncInstanceId=Nuclear.getInstanceId();
Nuclear.instances[this._ncInstanceId] = this;
this._nuclearParentEmpty = !selector;
this.HTML = "";
this.option = option;
@ -1483,12 +1484,12 @@ Nuclear._mixObj = function (obj) {
this.node = null;
this.HTML = "";
} else {
var newNode = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data));
var newNode = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixEvent(Nuclear._fixTplIndex(item.tpl), this._ncInstanceId), item.data));
item.parent.replaceChild(newNode, this.node);
this.node = newNode;
}
} else {
item.parent.insertAdjacentHTML("beforeEnd", Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data));
item.parent.insertAdjacentHTML("beforeEnd", Nuclear.Tpl.render(Nuclear._fixEvent(Nuclear._fixTplIndex(item.tpl), this._ncInstanceId), item.data));
this.node = item.parent.lastChild;
}
window["_nuclearIndex"] = null;
@ -1548,7 +1549,7 @@ Nuclear._mixObj = function (obj) {
var item = this._nuclearRenderInfo, rpLen = item.refreshPart.length;
item.tpl = this._nuclearTplGenerator();
if (rpLen > 0) {
var parts = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data)).querySelectorAll('*[nc-refresh]');
var parts = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixEvent(Nuclear._fixTplIndex(item.tpl), this._ncInstanceId), item.data)).querySelectorAll('*[nc-refresh]');
window["_nuclearIndex"] = null;
for (var j = 0; j < rpLen; j++) {
var part = item.refreshPart[j];
@ -1562,23 +1563,21 @@ Nuclear._mixObj = function (obj) {
this.HTML = this.node.outerHTML;
this._nuclearFix();
//var refLen = this._nuclearRef.length;
//if (refLen > 0) {
// var i = 0;
// for (; i < refLen; i++) {
// var ref = this._nuclearRef[i];
// ref.node = this.node.querySelector('*[data-nuclearId="' + ref._nuclearId + '"]');
// if (ref.onRefresh) ref.onRefresh();
// if (ref.installed) ref.installed();
// }
//}
} else {
this._nuclearRender(item);
}
}
}
Nuclear._fixEvent = function (tpl,instanceId) {
return tpl.replace(/<[\s\S]*?>/g, function (item) {
return item.replace(/(onabort|onblur|oncancel|oncanplay|oncanplaythrough|onchange|onclick|onclose|oncontextmenu|oncuechange|ondblclick|ondrag|ondragend|ondragenter|ondragleave|ondragover|ondragstart|ondrop|ondurationchange|onemptied|onended|onerror|onfocus|oninput|oninvalid|onkeydown|onkeypress|onkeyup|onload|onloadeddata|onloadedmetadata|onloadstart|onmousedown|onmouseenter|onmouseleave|onmousemove|onmouseout|onmouseover|onmouseup|onmousewheel|onpause|onplay|onplaying|onprogress|onratechange|onreset|onresize|onscroll|onseeked|onseeking|onselect|onshow|onstalled|onsubmit|onsuspend|ontimeupdate|ontoggle|onvolumechange|onwaiting|onautocomplete|onautocompleteerror|onbeforecopy|onbeforecut|onbeforepaste|oncopy|oncut|onpaste|onsearch|onselectstart|onwheel|onwebkitfullscreenchange|onwebkitfullscreenerror)=('|")/g, function (eventStr) {
return eventStr += "Nuclear.instances[" + instanceId + "].";
});
});
}
Nuclear._fixTplIndex = function (tpl) {
//"{{_nuclearIndex}}"
return tpl.replace(/{{#[\s\S]*?{{@index}}/g, function (str) {
@ -2066,9 +2065,14 @@ Nuclear._minCanvasObj = function (obj) {
Nuclear._nextID = 0;
Nuclear.getId = function () {
return Nuclear._nextID++;
return Nuclear._nextID++;
}
Nuclear._instanceId= 0;
Nuclear.getInstanceId = function () {
return Nuclear._instanceId++;
}
Nuclear.instances = {};
/*!
* mustache.js - Logic-less {{mustache}} templates with JavaScript
* http://github.com/janl/mustache.js

4
dist/nuclear.min.js vendored

File diff suppressed because one or more lines are too long

32
example/todo.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>Todo</title>
</head>
<body>
<div id="container"></div>
<script src="../dist/nuclear.js"></script>
<script type="text/javascript">
var TodoApp = Nuclear.create({
add: function (evt) {
evt.preventDefault();
this.option.items.push(this.textBox.value);
},
render: function () {
return '<div>\
<h3>TODO</h3>\
<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\
<form onsubmit="add(event)" >\
<input nc-id="textBox" type="text" />\
<button>Add #{{items.length}}</button>\
</form>\
</div>';
}
});
new TodoApp( { items: [] },"#container");
</script>
<a href="https://github.com/AlloyTeam/Nuclear" target="_blank" style="position: absolute; right: 0; top: 0;">
<img src="http://alloyteam.github.io/AlloyRenderingEngine/asset/img/github.png" alt="" />
</a>
</body>
</html>

View File

@ -10,6 +10,8 @@
Nuclear._mixObj = function (obj) {
obj.ctor = function (option, selector) {
this._ncInstanceId=Nuclear.getInstanceId();
Nuclear.instances[this._ncInstanceId] = this;
this._nuclearParentEmpty = !selector;
this.HTML = "";
this.option = option;
@ -104,12 +106,12 @@ Nuclear._mixObj = function (obj) {
this.node = null;
this.HTML = "";
} else {
var newNode = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data));
var newNode = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixEvent(Nuclear._fixTplIndex(item.tpl), this._ncInstanceId), item.data));
item.parent.replaceChild(newNode, this.node);
this.node = newNode;
}
} else {
item.parent.insertAdjacentHTML("beforeEnd", Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data));
item.parent.insertAdjacentHTML("beforeEnd", Nuclear.Tpl.render(Nuclear._fixEvent(Nuclear._fixTplIndex(item.tpl), this._ncInstanceId), item.data));
this.node = item.parent.lastChild;
}
window["_nuclearIndex"] = null;
@ -169,7 +171,7 @@ Nuclear._mixObj = function (obj) {
var item = this._nuclearRenderInfo, rpLen = item.refreshPart.length;
item.tpl = this._nuclearTplGenerator();
if (rpLen > 0) {
var parts = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data)).querySelectorAll('*[nc-refresh]');
var parts = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixEvent(Nuclear._fixTplIndex(item.tpl), this._ncInstanceId), item.data)).querySelectorAll('*[nc-refresh]');
window["_nuclearIndex"] = null;
for (var j = 0; j < rpLen; j++) {
var part = item.refreshPart[j];
@ -183,23 +185,21 @@ Nuclear._mixObj = function (obj) {
this.HTML = this.node.outerHTML;
this._nuclearFix();
//var refLen = this._nuclearRef.length;
//if (refLen > 0) {
// var i = 0;
// for (; i < refLen; i++) {
// var ref = this._nuclearRef[i];
// ref.node = this.node.querySelector('*[data-nuclearId="' + ref._nuclearId + '"]');
// if (ref.onRefresh) ref.onRefresh();
// if (ref.installed) ref.installed();
// }
//}
} else {
this._nuclearRender(item);
}
}
}
Nuclear._fixEvent = function (tpl,instanceId) {
return tpl.replace(/<[\s\S]*?>/g, function (item) {
return item.replace(/(onabort|onblur|oncancel|oncanplay|oncanplaythrough|onchange|onclick|onclose|oncontextmenu|oncuechange|ondblclick|ondrag|ondragend|ondragenter|ondragleave|ondragover|ondragstart|ondrop|ondurationchange|onemptied|onended|onerror|onfocus|oninput|oninvalid|onkeydown|onkeypress|onkeyup|onload|onloadeddata|onloadedmetadata|onloadstart|onmousedown|onmouseenter|onmouseleave|onmousemove|onmouseout|onmouseover|onmouseup|onmousewheel|onpause|onplay|onplaying|onprogress|onratechange|onreset|onresize|onscroll|onseeked|onseeking|onselect|onshow|onstalled|onsubmit|onsuspend|ontimeupdate|ontoggle|onvolumechange|onwaiting|onautocomplete|onautocompleteerror|onbeforecopy|onbeforecut|onbeforepaste|oncopy|oncut|onpaste|onsearch|onselectstart|onwheel|onwebkitfullscreenchange|onwebkitfullscreenerror)=('|")/g, function (eventStr) {
return eventStr += "Nuclear.instances[" + instanceId + "].";
});
});
}
Nuclear._fixTplIndex = function (tpl) {
//"{{_nuclearIndex}}"
return tpl.replace(/{{#[\s\S]*?{{@index}}/g, function (str) {
@ -687,6 +687,11 @@ Nuclear._minCanvasObj = function (obj) {
Nuclear._nextID = 0;
Nuclear.getId = function () {
return Nuclear._nextID++;
}
return Nuclear._nextID++;
}
Nuclear._instanceId= 0;
Nuclear.getInstanceId = function () {
return Nuclear._instanceId++;
}
Nuclear.instances = {};

View File

@ -12,7 +12,6 @@
define(function(require, exports, module){
module.exports=factory();
});
} else {
root.$ = root.Nuclear = factory();
}
root.$ = root.Nuclear = factory();
}(this, function () {