DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

解决模板引擎获取 @index

This commit is contained in:
张磊 2015-06-18 19:53:59 +08:00
parent 762ca84a2e
commit b7783d40e1
7 changed files with 86 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
asset/room.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
asset/sleep.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
asset/watch.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

24
dist/nuclear.js vendored
View File

@ -74,6 +74,13 @@ Nuclear._mixObj = function (obj) {
data: this.option,
parent: this.parent
};
this.option._nuclearIndex = function () {
return ++window['_nuclearIndex'] || (window['_nuclearIndex'] = 0);
}
this.option._resetNuclearIndex=function() {
window['_nuclearIndex'] = -1;
return;
}
this._nuclearRender(this._nuclearRenderInfo);
if (this.installed) this.installed();
}
@ -118,14 +125,15 @@ Nuclear._mixObj = function (obj) {
this.node = null;
this.HTML = "";
} else {
var newNode = Nuclear.str2Dom(Nuclear.Tpl.render(item.tpl, item.data));
var newNode = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data));
item.parent.replaceChild(newNode, this.node);
this.node = newNode;
}
} else {
item.parent.insertAdjacentHTML("beforeEnd", Nuclear.Tpl.render(item.tpl, item.data));
item.parent.insertAdjacentHTML("beforeEnd", Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data));
this.node = item.parent.lastChild;
}
window["_nuclearIndex"] = null;
if (this.node) {
this._nuclearId = Nuclear.getId();
this.node.setAttribute("data-nuclearId", this._nuclearId);
@ -181,9 +189,9 @@ Nuclear._mixObj = function (obj) {
obj._nuclearLocalRefresh = function () {
var item = this._nuclearRenderInfo, rpLen = item.refreshPart.length;
item.tpl = this._nuclearTplGenerator();
if (rpLen > 0) {
var parts = Nuclear.str2Dom(Nuclear.Tpl.render(item.tpl, item.data)).querySelectorAll('*[nc-refresh]');
var parts = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data)).querySelectorAll('*[nc-refresh]');
window["_nuclearIndex"] = null;
for (var j = 0; j < rpLen; j++) {
var part = item.refreshPart[j];
//part.parentNode为null,代表其已经被子节点替换掉了
@ -213,6 +221,14 @@ Nuclear._mixObj = function (obj) {
}
}
Nuclear._fixTplIndex = function (tpl) {
//"{{_nuclearIndex}}"
return tpl.replace(/{{#[\s\S]*?{{@index}}/g, function (str) {
return "{{_resetNuclearIndex}}" + str.replace("{{@index}}", "{{_nuclearIndex}}");
});
}
Nuclear._minActionObj = function (obj) {
obj.ctor = function (option) {
this.option = option;

2
dist/nuclear.min.js vendored
View File

File diff suppressed because one or more lines are too long

45
example/carousel.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<!-- style='max-width: 200px; margin: 0 auto'-->
<!--<div style="max-width: 300px; margin: 0 auto;overflow: hidden;">
<div style="position:relative; width: 300%; transition: left 1s cubic-bezier(0.22, 0.61, 0.36, 1); font-size: 0; left: 0%;">
<img style=" width: 33.33%;" src="../asset/room.jpg" />
<img style=" width: 33.33%;" src="../asset/sleep.jpg" />
<img style=" width: 33.33%;" src="../asset/watch.jpg" />
</div>
</div>-->
<div style=""></div>
<div id="carouselContainer"></div>
<script src="../dist/nuclear.js"></script>
<script>
var Carousel = Nuclear.create({
install: function () {
this.imgCount = this.option.imgs.length;
},
onOptionChange: function (prop, value, oldValue, path) {
if (prop === "index") {
this.carouselScroll.style.left = value * -100 + "%";
}
},
render: function () {
return '<div style="max-width: 280px; margin: 0 auto;overflow: hidden;position:relative;">\
<div nc-id="carouselScroll" style="position:relative; width: ' + this.imgCount * 100 + '%; transition: left 1s cubic-bezier(0.22, 0.61, 0.36, 1); font-size: 0; left: ' + this.option.index * -100 + '%;">\
{{#imgs}}<img style=" width:'+100/this.imgCount+'%;" src="{{.}}" /> {{/imgs}}\
</div>\
<div style="position:absolute;bottom:0;right:0;"> {{#imgs}}<a style="display:inline-block;background-color:white;cursor:pointer;">{{@index}}</a> {{/imgs}}</div>\
</div>';
;
}
});
var c=new Carousel({
imgs: ["../asset/room.jpg", "../asset/sleep.jpg", "../asset/watch.jpg"],
index:0
}, "#carouselContainer");
</script>
</body>
</html>

24
src/nuclear.js
View File

@ -55,6 +55,13 @@ Nuclear._mixObj = function (obj) {
data: this.option,
parent: this.parent
};
this.option._nuclearIndex = function () {
return ++window['_nuclearIndex'] || (window['_nuclearIndex'] = 0);
}
this.option._resetNuclearIndex=function() {
window['_nuclearIndex'] = -1;
return;
}
this._nuclearRender(this._nuclearRenderInfo);
if (this.installed) this.installed();
}
@ -99,14 +106,15 @@ Nuclear._mixObj = function (obj) {
this.node = null;
this.HTML = "";
} else {
var newNode = Nuclear.str2Dom(Nuclear.Tpl.render(item.tpl, item.data));
var newNode = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data));
item.parent.replaceChild(newNode, this.node);
this.node = newNode;
}
} else {
item.parent.insertAdjacentHTML("beforeEnd", Nuclear.Tpl.render(item.tpl, item.data));
item.parent.insertAdjacentHTML("beforeEnd", Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data));
this.node = item.parent.lastChild;
}
window["_nuclearIndex"] = null;
if (this.node) {
this._nuclearId = Nuclear.getId();
this.node.setAttribute("data-nuclearId", this._nuclearId);
@ -162,9 +170,9 @@ Nuclear._mixObj = function (obj) {
obj._nuclearLocalRefresh = function () {
var item = this._nuclearRenderInfo, rpLen = item.refreshPart.length;
item.tpl = this._nuclearTplGenerator();
if (rpLen > 0) {
var parts = Nuclear.str2Dom(Nuclear.Tpl.render(item.tpl, item.data)).querySelectorAll('*[nc-refresh]');
var parts = Nuclear.str2Dom(Nuclear.Tpl.render(Nuclear._fixTplIndex(item.tpl), item.data)).querySelectorAll('*[nc-refresh]');
window["_nuclearIndex"] = null;
for (var j = 0; j < rpLen; j++) {
var part = item.refreshPart[j];
//part.parentNode为null,代表其已经被子节点替换掉了
@ -194,6 +202,14 @@ Nuclear._mixObj = function (obj) {
}
}
Nuclear._fixTplIndex = function (tpl) {
//"{{_nuclearIndex}}"
return tpl.replace(/{{#[\s\S]*?{{@index}}/g, function (str) {
return "{{_resetNuclearIndex}}" + str.replace("{{@index}}", "{{_nuclearIndex}}");
});
}
Nuclear._minActionObj = function (obj) {
obj.ctor = function (option) {
this.option = option;