懒人级联
This commit is contained in:
张磊
parent
29acb7856a
commit
d25b13c0d6
|
|
@ -1,4 +1,4 @@
|
|||
/* Nuclear v0.5.2
|
||||
/* Nuclear v0.5.3
|
||||
* By AlloyTeam http://www.alloyteam.com/
|
||||
* Github: https://github.com/AlloyTeam/Nuclear
|
||||
* MIT Licensed.
|
||||
|
|
@ -739,7 +739,7 @@ Nuclear.destroy=function(instance){
|
|||
|
||||
Nuclear.clone = function (item) {
|
||||
if (!item) { return item; } // null, undefined values check
|
||||
|
||||
if (item.hasOwnProperty("$observeProps") ||item.hasOwnProperty("$observer") ) return item;
|
||||
var types = [Number, String, Boolean],
|
||||
result;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,91 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Communication</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Communication</title>
|
||||
<script src="../dist/nuclear.js"></script>
|
||||
<script src="asset/arttemplate.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="demo"></div>
|
||||
<div id="demo"></div>
|
||||
<script type="text/javascript">
|
||||
//第三方模板的替换
|
||||
Nuclear.render = function (tpl, data) {
|
||||
return template.compile(tpl)(data);
|
||||
};
|
||||
|
||||
<script src="../dist/nuclear.js"></script>
|
||||
var ListTitle = Nuclear.create({
|
||||
render: function () {
|
||||
return '<div>List num {{users.length}}</div>'
|
||||
}
|
||||
});
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
//子组件
|
||||
var SubCompement = Nuclear.create({
|
||||
|
||||
render: function () {
|
||||
return '<div>{{title}}</div>';
|
||||
}
|
||||
|
||||
|
||||
, installed: function () {
|
||||
var _this = this;
|
||||
// console.log(_this)
|
||||
// var parent = _this.option.parent;
|
||||
// parent.option.text = "11111111";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var SubButton = Nuclear.create({
|
||||
changeParentTitle: function () {
|
||||
console.log(this)
|
||||
//这个方法中如何修改SpecialMark组件里面的option?
|
||||
console.log(this.nuclearParent);
|
||||
|
||||
this.nuclearParent.option.title = "abc";
|
||||
},
|
||||
render: function () {
|
||||
return '<button onclick="changeParentTitle(event)">{{buttonText}}</button>';
|
||||
}
|
||||
});
|
||||
|
||||
var SpecialMark = Nuclear.create({
|
||||
install: function () {
|
||||
var _this = this;
|
||||
// debugger;
|
||||
this.childrenOptions = [{ title: "Todo" }, { buttonText: "改变父组件的内容" }];
|
||||
}
|
||||
//改变title的方法
|
||||
, changeTitle: function () {
|
||||
var _this = this;
|
||||
//此方法用来修改SubCompement组件的内容，也就是改变子组件的内容
|
||||
this.title.option.title = "Todo changed";
|
||||
}
|
||||
, render: function () {
|
||||
return '\
|
||||
<div class="demo">\
|
||||
<child nc-constructor="SubCompement" nc-name="title"></child>\
|
||||
<child nc-constructor="SubButton" nc-name="subButton"></child>\
|
||||
<div>\
|
||||
<div>{{title}}</div>\
|
||||
<input type="text" nc-id="inputDom" value="{{text}}" />\
|
||||
<input type="checkbox" nc-class="chechbox" />\
|
||||
<input type="checkbox" nc-class="chechbox" />\
|
||||
<button onclick="changeTitle(event)">changeTitle</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
var ItemList = Nuclear.create({
|
||||
deleteEvent: function (index) {
|
||||
this.option.users.splice(index, 1);
|
||||
},
|
||||
add: function () {
|
||||
this.option.users.push({ "name": "333" });
|
||||
},
|
||||
render: function () {
|
||||
return '\
|
||||
<ul>\
|
||||
{{each users as item index}}\
|
||||
<li>{{item.name}} <a onclick="deleteEvent({{index}})" href="javascript:void(0)">delete</a></li>\
|
||||
{{/each}}\
|
||||
</ul>\
|
||||
';
|
||||
}
|
||||
}
|
||||
});
|
||||
var App = Nuclear.create({
|
||||
install: function () {
|
||||
var _this = this;
|
||||
this.childrenOptions = [
|
||||
this.option,
|
||||
this.option
|
||||
];
|
||||
},
|
||||
add: function () {
|
||||
this.itemList.option.users.push({ name: 'aaa' });
|
||||
},
|
||||
clear: function () {
|
||||
this.itemList.option.users = [];
|
||||
},
|
||||
render: function () {
|
||||
return '\
|
||||
<div nc-id="app">\
|
||||
<child nc-constructor="ListTitle" nc-name="listTitle"></child>\
|
||||
<child nc-constructor="ItemList" nc-name="itemList"></child>\
|
||||
<div><a onclick="add()" href="javascript:void(0)">添加</a></div>\
|
||||
<div><a onclick="clear()" href="javascript:void(0)">清空</a></div>\
|
||||
</div>\
|
||||
';
|
||||
}
|
||||
});
|
||||
var app = new App({
|
||||
users: [{
|
||||
name: 'item1'
|
||||
}, {
|
||||
name: 'item2'
|
||||
}, {
|
||||
name: 'item3'
|
||||
}]
|
||||
}, "#demo");
|
||||
|
||||
, installed: function () {
|
||||
var _this = this;
|
||||
//在任何一个方法中可以通过this.inputDom获取到这个input的dom节点，返回的是原声的dom节点，可以通过jquery包装后继续使用
|
||||
var text = this.inputDom.value;
|
||||
//nc-class也是特殊标识符，标志之后，可以通过this.class内容获取到一个数组，但是只能获取衡等于chechbox的内容，如果有额外样式的就获取不到了。
|
||||
var chechboxDoms = this.chechbox;
|
||||
}
|
||||
});
|
||||
|
||||
new SpecialMark({
|
||||
title: '父组件的内容',
|
||||
text: '这是一个demo'
|
||||
|
||||
}, "#demo");
|
||||
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -34,9 +34,7 @@
|
|||
|
||||
var App = Nuclear.create({
|
||||
install: function () {
|
||||
var _this = this;
|
||||
var listData = _this.pureOption.users;
|
||||
this.childrenOptions = [{ users: listData }];
|
||||
this.childrenOptions = [this.option];
|
||||
},
|
||||
add: function () {
|
||||
this.itemList.option.users.push({ name: 'aaa' });
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "alloynuclear",
|
||||
"version": "0.5.2",
|
||||
"version": "0.5.3",
|
||||
"description": "made UI super easy.",
|
||||
"main": "dist/nuclear.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -501,7 +501,7 @@ Nuclear.destroy=function(instance){
|
|||
|
||||
Nuclear.clone = function (item) {
|
||||
if (!item) { return item; } // null, undefined values check
|
||||
|
||||
if (item.hasOwnProperty("$observeProps") ||item.hasOwnProperty("$observer") ) return item;
|
||||
var types = [Number, String, Boolean],
|
||||
result;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue