omi store system
This commit is contained in:
parent
e1a2a32291
commit
f7524a5212
|
@ -60,8 +60,10 @@
|
|||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
_index2['default'].useStore(_store2['default']);
|
||||
_index2['default'].render(new _todo2['default'](), 'body', true);
|
||||
_index2['default'].render(new _todo2['default'](), 'body', {
|
||||
store: _store2['default'],
|
||||
increment: true
|
||||
});
|
||||
|
||||
/***/ },
|
||||
/* 1 */
|
||||
|
@ -99,19 +101,29 @@
|
|||
function Todo(data) {
|
||||
_classCallCheck(this, Todo);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, (Todo.__proto__ || Object.getPrototypeOf(Todo)).call(this, data));
|
||||
|
||||
_this.store.ready(function () {
|
||||
return _this.update();
|
||||
});
|
||||
return _this;
|
||||
return _possibleConstructorReturn(this, (Todo.__proto__ || Object.getPrototypeOf(Todo)).call(this, data));
|
||||
}
|
||||
|
||||
_createClass(Todo, [{
|
||||
key: 'install',
|
||||
value: function install() {
|
||||
var _this2 = this;
|
||||
|
||||
this.$store.ready(function () {
|
||||
return _this2.update();
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: 'storeToData',
|
||||
value: function storeToData() {
|
||||
this.data.length = this.$store.data.items.length;
|
||||
this.data.text = this.$store.text;
|
||||
}
|
||||
}, {
|
||||
key: 'add',
|
||||
value: function add(evt) {
|
||||
evt.preventDefault();
|
||||
this.store.add();
|
||||
this.$store.add();
|
||||
}
|
||||
}, {
|
||||
key: 'style',
|
||||
|
@ -121,7 +133,7 @@
|
|||
}, {
|
||||
key: 'handleChange',
|
||||
value: function handleChange(target) {
|
||||
this.store.updateText(target.value);
|
||||
this.$store.updateText(target.value);
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
|
@ -401,9 +413,17 @@
|
|||
Omi.customTags.push(name);
|
||||
};
|
||||
|
||||
Omi.render = function (component, renderTo, increment) {
|
||||
Omi.render = function (component, renderTo, incrementOrOption) {
|
||||
component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo;
|
||||
component._omi_increment = increment;
|
||||
if (typeof incrementOrOption === 'boolean') {
|
||||
component._omi_increment = increment;
|
||||
} else {
|
||||
component._omi_increment = incrementOrOption.increment;
|
||||
component.$store = incrementOrOption.store;
|
||||
if (component.$store) {
|
||||
component.$store.instances.push(component);
|
||||
}
|
||||
}
|
||||
component.install();
|
||||
component._render(true);
|
||||
component._childrenInstalled(component);
|
||||
|
@ -472,12 +492,6 @@
|
|||
});
|
||||
};
|
||||
|
||||
Omi.useStore = function (globalStore, autoUse) {
|
||||
Omi.globalStore = globalStore;
|
||||
Omi.dataFromGlobalStore = true;
|
||||
Omi._autoUseGlobalStore = autoUse;
|
||||
};
|
||||
|
||||
module.exports = Omi;
|
||||
|
||||
/***/ },
|
||||
|
@ -1133,9 +1147,13 @@
|
|||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var Component = function () {
|
||||
function Component(data, server) {
|
||||
function Component(data, option) {
|
||||
_classCallCheck(this, Component);
|
||||
|
||||
var componentOption = Object.assign({
|
||||
server: false,
|
||||
useStoreData: false
|
||||
}, option);
|
||||
//re render the server-side rendering html on the client-side
|
||||
var type = Object.prototype.toString.call(data);
|
||||
var isReRendering = type !== '[object Object]' && type !== '[object Undefined]';
|
||||
|
@ -1146,7 +1164,7 @@
|
|||
this.data = JSON.parse(this._hidden.value);
|
||||
} else {
|
||||
this.data = data || {};
|
||||
this._omi_server_rendering = server;
|
||||
this._omi_server_rendering = componentOption.server;
|
||||
this.id = this._omi_server_rendering ? 1000000 + _omi2['default'].getInstanceId() : _omi2['default'].getInstanceId();
|
||||
}
|
||||
this.refs = {};
|
||||
|
@ -1161,14 +1179,6 @@
|
|||
//this.BODY_ELEMENT = document.createElement('body')
|
||||
this._preCSS = null;
|
||||
this._omiGroupDataCounter = {};
|
||||
if (_omi2['default'].dataFromGlobalStore) {
|
||||
this.dataFromStore = true;
|
||||
if (_omi2['default']._autoUseGlobalStore) {
|
||||
this.useStore(_omi2['default'].globalStore);
|
||||
}
|
||||
} else {
|
||||
this.dataFromStore = false;
|
||||
}
|
||||
if (this._omi_server_rendering || isReRendering) {
|
||||
this.install();
|
||||
this._render(true);
|
||||
|
@ -1198,6 +1208,9 @@
|
|||
}, {
|
||||
key: 'style',
|
||||
value: function style() {}
|
||||
}, {
|
||||
key: 'storeToData',
|
||||
value: function storeToData() {}
|
||||
}, {
|
||||
key: 'useStore',
|
||||
value: function useStore(store) {
|
||||
|
@ -1356,6 +1369,7 @@
|
|||
}
|
||||
return;
|
||||
}
|
||||
this.storeToData();
|
||||
this._generateHTMLCSS();
|
||||
this._extractChildren(this);
|
||||
|
||||
|
@ -1396,6 +1410,7 @@
|
|||
}
|
||||
//childStr = childStr.replace("<child", "<div").replace("/>", "></div>")
|
||||
this._mergeData(childStr);
|
||||
this.storeToData();
|
||||
this._generateHTMLCSS();
|
||||
this._extractChildren(this);
|
||||
|
||||
|
@ -1520,7 +1535,6 @@
|
|||
}, {
|
||||
key: '_mergeData',
|
||||
value: function _mergeData(childStr) {
|
||||
if (this.dataFromStore) return;
|
||||
if (this.dataFirst) {
|
||||
this.data = Object.assign({}, this._getDataset(childStr), this.data);
|
||||
} else {
|
||||
|
@ -1645,6 +1659,10 @@
|
|||
var sub_child = new ChildClass(Object.assign(baseData, child.childrenData[i], dataset, dataFromParent, groupData), false);
|
||||
sub_child._omiChildStr = childStr;
|
||||
sub_child.parent = child;
|
||||
sub_child.$store = child.$store;
|
||||
if (sub_child.$store) {
|
||||
sub_child.$store.instances.push(sub_child);
|
||||
}
|
||||
sub_child.___omi_constructor_name = name;
|
||||
sub_child._dataset = {};
|
||||
sub_child.install();
|
||||
|
@ -1747,11 +1765,14 @@
|
|||
});
|
||||
function scopedEvent(tpl, id) {
|
||||
return tpl.replace(/<[\s\S]*?>/g, function (item) {
|
||||
return item.replace(/on(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave|Abort|Blur|Cancel|CanPlay|CanPlayThrough|Change|Click|Close|ContextMenu|CueChange|DblClick|Drag|DragEnd|DragEnter|DragLeave|DragOver|DragStart|Drop|DurationChange|Emptied|Ended|Error|Focus|Input|Invalid|KeyDown|KeyPress|KeyUp|Load|LoadedData|LoadedMetadata|LoadStart|MouseDown|MouseEnter|MouseLeave|MouseMove|MouseOut|MouseOver|MouseUp|MouseWheel|Pause|Play|Playing|Progress|RateChange|Reset|Resize|Scroll|Seeked|Seeking|Select|Show|Stalled|Submit|Suspend|TimeUpdate|Toggle|VolumeChange|Waiting|AutoComplete|AutoCompleteError|BeforeCopy|BeforeCut|BeforePaste|Copy|Cut|Paste|Search|SelectStart|Wheel|WebkitFullScreenChange|WebkitFullScreenError|TouchStart|TouchMove|TouchEnd|TouchCancel|PointerDown|PointerUp|PointerCancel|PointerMove|PointerOver|PointerOut|PointerEnter|PointerLeave)=('|")([\s\S]*?)\([\s\S]*?\)/g, function (eventStr, b, c, d) {
|
||||
if (d.indexOf('Omi.instances[') === 0) {
|
||||
return item.replace(/on(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave|Abort|Blur|Cancel|CanPlay|CanPlayThrough|Change|Click|Close|ContextMenu|CueChange|DblClick|Drag|DragEnd|DragEnter|DragLeave|DragOver|DragStart|Drop|DurationChange|Emptied|Ended|Error|Focus|Input|Invalid|KeyDown|KeyPress|KeyUp|Load|LoadedData|LoadedMetadata|LoadStart|MouseDown|MouseEnter|MouseLeave|MouseMove|MouseOut|MouseOver|MouseUp|MouseWheel|Pause|Play|Playing|Progress|RateChange|Reset|Resize|Scroll|Seeked|Seeking|Select|Show|Stalled|Submit|Suspend|TimeUpdate|Toggle|VolumeChange|Waiting|AutoComplete|AutoCompleteError|BeforeCopy|BeforeCut|BeforePaste|Copy|Cut|Paste|Search|SelectStart|Wheel|WebkitFullScreenChange|WebkitFullScreenError|TouchStart|TouchMove|TouchEnd|TouchCancel|PointerDown|PointerUp|PointerCancel|PointerMove|PointerOver|PointerOut|PointerEnter|PointerLeave)=(('([\s\S]*?)')|("([\s\S]*?)"))/g, function (eventStr, b, c) {
|
||||
if (c.indexOf('Omi.instances[') === 1) {
|
||||
return eventStr;
|
||||
} else {
|
||||
} else if (c.lastIndexOf(')') === c.length - 2) {
|
||||
return eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');
|
||||
} else {
|
||||
var str = eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');
|
||||
return str.substr(0, str.length - 1) + "(event)" + str.substr(str.length - 1, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
@ -2803,6 +2824,11 @@
|
|||
}
|
||||
|
||||
_createClass(List, [{
|
||||
key: 'storeToData',
|
||||
value: function storeToData() {
|
||||
this.data.items = this.$store.data.items;
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
return ' <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>';
|
||||
|
|
|
@ -5,6 +5,10 @@ class List extends Omi.Component {
|
|||
super(data)
|
||||
}
|
||||
|
||||
storeToData(){
|
||||
this.data.items = this.$store.data.items
|
||||
}
|
||||
|
||||
render () {
|
||||
return ` <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`
|
||||
}
|
||||
|
|
|
@ -2,5 +2,7 @@
|
|||
import Omi from '../../src/index.js';
|
||||
import store from './store.js';
|
||||
|
||||
Omi.useStore(store, true);
|
||||
Omi.render(new Todo(),'body',true);
|
||||
Omi.render(new Todo(),'body',{
|
||||
store,
|
||||
increment:true
|
||||
});
|
|
@ -1,18 +1,25 @@
|
|||
import Omi from '../../src/index.js';
|
||||
import List from './list.js';
|
||||
|
||||
|
||||
Omi.makeHTML('List', List);
|
||||
|
||||
class Todo extends Omi.Component {
|
||||
constructor(data) {
|
||||
super(data)
|
||||
this.store.ready(()=>this.update())
|
||||
}
|
||||
|
||||
install(){
|
||||
this.$store.ready(()=>this.update())
|
||||
}
|
||||
|
||||
storeToData(){
|
||||
this.data.length = this.$store.data.items.length
|
||||
this.data.text = this.$store.text
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
evt.preventDefault();
|
||||
this.store.add();
|
||||
this.$store.add();
|
||||
}
|
||||
|
||||
style () {
|
||||
|
@ -23,7 +30,7 @@ class Todo extends Omi.Component {
|
|||
}
|
||||
|
||||
handleChange(target){
|
||||
this.store.updateText(target.value);
|
||||
this.$store.updateText(target.value);
|
||||
}
|
||||
|
||||
render () {
|
||||
|
|
|
@ -101,17 +101,23 @@
|
|||
var _this = _possibleConstructorReturn(this, (Todo.__proto__ || Object.getPrototypeOf(Todo)).call(this, data));
|
||||
|
||||
_this.useStore(_store2['default']);
|
||||
_this.store.ready(function () {
|
||||
_this.$$store.ready(function () {
|
||||
return _this.update();
|
||||
});
|
||||
return _this;
|
||||
}
|
||||
|
||||
_createClass(Todo, [{
|
||||
key: 'storeToData',
|
||||
value: function storeToData() {
|
||||
this.data.length = this.$$store.data.items.length;
|
||||
this.data.text = this.$$store.text;
|
||||
}
|
||||
}, {
|
||||
key: 'add',
|
||||
value: function add(evt) {
|
||||
evt.preventDefault();
|
||||
this.store.add();
|
||||
this.$$store.add();
|
||||
}
|
||||
}, {
|
||||
key: 'style',
|
||||
|
@ -401,9 +407,17 @@
|
|||
Omi.customTags.push(name);
|
||||
};
|
||||
|
||||
Omi.render = function (component, renderTo, increment) {
|
||||
Omi.render = function (component, renderTo, incrementOrOption) {
|
||||
component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo;
|
||||
component._omi_increment = increment;
|
||||
if (typeof incrementOrOption === 'boolean') {
|
||||
component._omi_increment = incrementOrOption;
|
||||
} else {
|
||||
component._omi_increment = incrementOrOption.increment;
|
||||
component.$store = incrementOrOption.store;
|
||||
if (component.$store) {
|
||||
component.$store.instances.push(component);
|
||||
}
|
||||
}
|
||||
component.install();
|
||||
component._render(true);
|
||||
component._childrenInstalled(component);
|
||||
|
@ -472,11 +486,6 @@
|
|||
});
|
||||
};
|
||||
|
||||
Omi.useStore = function (globalStore) {
|
||||
Omi.globalStore = globalStore;
|
||||
Omi.dataFromGlobalStore = true;
|
||||
};
|
||||
|
||||
module.exports = Omi;
|
||||
|
||||
/***/ },
|
||||
|
@ -1132,9 +1141,12 @@
|
|||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
var Component = function () {
|
||||
function Component(data, server) {
|
||||
function Component(data, option) {
|
||||
_classCallCheck(this, Component);
|
||||
|
||||
var componentOption = Object.assign({
|
||||
server: false
|
||||
}, option);
|
||||
//re render the server-side rendering html on the client-side
|
||||
var type = Object.prototype.toString.call(data);
|
||||
var isReRendering = type !== '[object Object]' && type !== '[object Undefined]';
|
||||
|
@ -1145,7 +1157,7 @@
|
|||
this.data = JSON.parse(this._hidden.value);
|
||||
} else {
|
||||
this.data = data || {};
|
||||
this._omi_server_rendering = server;
|
||||
this._omi_server_rendering = componentOption.server;
|
||||
this.id = this._omi_server_rendering ? 1000000 + _omi2['default'].getInstanceId() : _omi2['default'].getInstanceId();
|
||||
}
|
||||
this.refs = {};
|
||||
|
@ -1160,12 +1172,6 @@
|
|||
//this.BODY_ELEMENT = document.createElement('body')
|
||||
this._preCSS = null;
|
||||
this._omiGroupDataCounter = {};
|
||||
if (_omi2['default'].dataFromGlobalStore) {
|
||||
this.dataFromStore = true;
|
||||
this.useStore(_omi2['default'].globalStore);
|
||||
} else {
|
||||
this.dataFromStore = false;
|
||||
}
|
||||
if (this._omi_server_rendering || isReRendering) {
|
||||
this.install();
|
||||
this._render(true);
|
||||
|
@ -1195,15 +1201,16 @@
|
|||
}, {
|
||||
key: 'style',
|
||||
value: function style() {}
|
||||
}, {
|
||||
key: 'storeToData',
|
||||
value: function storeToData() {}
|
||||
}, {
|
||||
key: 'useStore',
|
||||
value: function useStore(store) {
|
||||
var _this = this;
|
||||
|
||||
this.store = store;
|
||||
this.data = store.data;
|
||||
this.$$store = store;
|
||||
var isInclude = false;
|
||||
this.dataFromStore = true;
|
||||
store.instances.forEach(function (instance) {
|
||||
if (instance.id === _this.id) {
|
||||
isInclude = true;
|
||||
|
@ -1353,6 +1360,7 @@
|
|||
}
|
||||
return;
|
||||
}
|
||||
this.storeToData();
|
||||
this._generateHTMLCSS();
|
||||
this._extractChildren(this);
|
||||
|
||||
|
@ -1393,6 +1401,7 @@
|
|||
}
|
||||
//childStr = childStr.replace("<child", "<div").replace("/>", "></div>")
|
||||
this._mergeData(childStr);
|
||||
this.storeToData();
|
||||
this._generateHTMLCSS();
|
||||
this._extractChildren(this);
|
||||
|
||||
|
@ -1517,7 +1526,6 @@
|
|||
}, {
|
||||
key: '_mergeData',
|
||||
value: function _mergeData(childStr) {
|
||||
if (this.dataFromStore) return;
|
||||
if (this.dataFirst) {
|
||||
this.data = Object.assign({}, this._getDataset(childStr), this.data);
|
||||
} else {
|
||||
|
@ -1642,6 +1650,10 @@
|
|||
var sub_child = new ChildClass(Object.assign(baseData, child.childrenData[i], dataset, dataFromParent, groupData), false);
|
||||
sub_child._omiChildStr = childStr;
|
||||
sub_child.parent = child;
|
||||
sub_child.$store = child.$store;
|
||||
if (sub_child.$store) {
|
||||
sub_child.$store.instances.push(sub_child);
|
||||
}
|
||||
sub_child.___omi_constructor_name = name;
|
||||
sub_child._dataset = {};
|
||||
sub_child.install();
|
||||
|
@ -1744,11 +1756,14 @@
|
|||
});
|
||||
function scopedEvent(tpl, id) {
|
||||
return tpl.replace(/<[\s\S]*?>/g, function (item) {
|
||||
return item.replace(/on(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave|Abort|Blur|Cancel|CanPlay|CanPlayThrough|Change|Click|Close|ContextMenu|CueChange|DblClick|Drag|DragEnd|DragEnter|DragLeave|DragOver|DragStart|Drop|DurationChange|Emptied|Ended|Error|Focus|Input|Invalid|KeyDown|KeyPress|KeyUp|Load|LoadedData|LoadedMetadata|LoadStart|MouseDown|MouseEnter|MouseLeave|MouseMove|MouseOut|MouseOver|MouseUp|MouseWheel|Pause|Play|Playing|Progress|RateChange|Reset|Resize|Scroll|Seeked|Seeking|Select|Show|Stalled|Submit|Suspend|TimeUpdate|Toggle|VolumeChange|Waiting|AutoComplete|AutoCompleteError|BeforeCopy|BeforeCut|BeforePaste|Copy|Cut|Paste|Search|SelectStart|Wheel|WebkitFullScreenChange|WebkitFullScreenError|TouchStart|TouchMove|TouchEnd|TouchCancel|PointerDown|PointerUp|PointerCancel|PointerMove|PointerOver|PointerOut|PointerEnter|PointerLeave)=('|")([\s\S]*?)\([\s\S]*?\)/g, function (eventStr, b, c, d) {
|
||||
if (d.indexOf('Omi.instances[') === 0) {
|
||||
return item.replace(/on(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave|Abort|Blur|Cancel|CanPlay|CanPlayThrough|Change|Click|Close|ContextMenu|CueChange|DblClick|Drag|DragEnd|DragEnter|DragLeave|DragOver|DragStart|Drop|DurationChange|Emptied|Ended|Error|Focus|Input|Invalid|KeyDown|KeyPress|KeyUp|Load|LoadedData|LoadedMetadata|LoadStart|MouseDown|MouseEnter|MouseLeave|MouseMove|MouseOut|MouseOver|MouseUp|MouseWheel|Pause|Play|Playing|Progress|RateChange|Reset|Resize|Scroll|Seeked|Seeking|Select|Show|Stalled|Submit|Suspend|TimeUpdate|Toggle|VolumeChange|Waiting|AutoComplete|AutoCompleteError|BeforeCopy|BeforeCut|BeforePaste|Copy|Cut|Paste|Search|SelectStart|Wheel|WebkitFullScreenChange|WebkitFullScreenError|TouchStart|TouchMove|TouchEnd|TouchCancel|PointerDown|PointerUp|PointerCancel|PointerMove|PointerOver|PointerOut|PointerEnter|PointerLeave)=(('([\s\S]*?)')|("([\s\S]*?)"))/g, function (eventStr, b, c) {
|
||||
if (c.indexOf('Omi.instances[') === 1) {
|
||||
return eventStr;
|
||||
} else {
|
||||
} else if (c.lastIndexOf(')') === c.length - 2) {
|
||||
return eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');
|
||||
} else {
|
||||
var str = eventStr.replace(/=(['|"])/, '=$1Omi.instances[' + id + '].');
|
||||
return str.substr(0, str.length - 1) + "(event)" + str.substr(str.length - 1, 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
@ -2807,6 +2822,11 @@
|
|||
}
|
||||
|
||||
_createClass(List, [{
|
||||
key: 'storeToData',
|
||||
value: function storeToData() {
|
||||
this.data.items = this.$$store.data.items;
|
||||
}
|
||||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
return ' <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>';
|
||||
|
|
|
@ -7,6 +7,10 @@ class List extends Omi.Component {
|
|||
this.useStore(store)
|
||||
}
|
||||
|
||||
storeToData(){
|
||||
this.data.items = this.$$store.data.items
|
||||
}
|
||||
|
||||
render () {
|
||||
return ` <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`
|
||||
}
|
||||
|
|
|
@ -8,12 +8,17 @@ class Todo extends Omi.Component {
|
|||
constructor(data) {
|
||||
super(data)
|
||||
this.useStore(store)
|
||||
this.store.ready(()=>this.update())
|
||||
this.$$store.ready(()=>this.update())
|
||||
}
|
||||
|
||||
storeToData(){
|
||||
this.data.length = this.$$store.data.items.length
|
||||
this.data.text = this.$$store.text
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
evt.preventDefault();
|
||||
this.store.add();
|
||||
this.$$store.add();
|
||||
}
|
||||
|
||||
style () {
|
||||
|
|
|
@ -7,8 +7,7 @@ import html2json from './html2json.js'
|
|||
class Component {
|
||||
constructor(data, option) {
|
||||
const componentOption = Object.assign({
|
||||
server:false,
|
||||
useLocalData: false
|
||||
server:false
|
||||
},option)
|
||||
//re render the server-side rendering html on the client-side
|
||||
const type = Object.prototype.toString.call(data)
|
||||
|
@ -35,14 +34,6 @@ class Component {
|
|||
//this.BODY_ELEMENT = document.createElement('body')
|
||||
this._preCSS = null
|
||||
this._omiGroupDataCounter = {}
|
||||
if(Omi.dataFromGlobalStore){
|
||||
this.dataFromStore = true
|
||||
if(Omi._autoUseGlobalStore&&!componentOption.useLocalData) {
|
||||
this.useStore(Omi.store)
|
||||
}
|
||||
}else{
|
||||
this.dataFromStore = false
|
||||
}
|
||||
if (this._omi_server_rendering || isReRendering) {
|
||||
this.install()
|
||||
this._render(true)
|
||||
|
@ -70,22 +61,26 @@ class Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
|
||||
}
|
||||
|
||||
style() {
|
||||
|
||||
}
|
||||
|
||||
useStore(store){
|
||||
this.store = store
|
||||
this.data = store.data
|
||||
storeToData(){
|
||||
|
||||
}
|
||||
|
||||
useStore(store) {
|
||||
this.$$store = store
|
||||
let isInclude = false
|
||||
this.dataFromStore = true
|
||||
store.instances.forEach(instance=>{
|
||||
if(instance.id ===this.id){
|
||||
store.instances.forEach(instance=> {
|
||||
if (instance.id === this.id) {
|
||||
isInclude = true
|
||||
}
|
||||
})
|
||||
if(!isInclude){
|
||||
if (!isInclude) {
|
||||
store.instances.push(this)
|
||||
}
|
||||
}
|
||||
|
@ -207,6 +202,7 @@ class Component {
|
|||
}
|
||||
return
|
||||
}
|
||||
this.storeToData()
|
||||
this._generateHTMLCSS()
|
||||
this._extractChildren(this)
|
||||
|
||||
|
@ -244,6 +240,7 @@ class Component {
|
|||
}
|
||||
//childStr = childStr.replace("<child", "<div").replace("/>", "></div>")
|
||||
this._mergeData(childStr)
|
||||
this.storeToData()
|
||||
this._generateHTMLCSS()
|
||||
this._extractChildren(this)
|
||||
|
||||
|
@ -354,7 +351,6 @@ class Component {
|
|||
}
|
||||
|
||||
_mergeData(childStr) {
|
||||
if(this.dataFromStore) return
|
||||
if(this.dataFirst){
|
||||
this.data = Object.assign({},this._getDataset(childStr),this.data)
|
||||
}else{
|
||||
|
@ -470,6 +466,10 @@ class Component {
|
|||
let sub_child = new ChildClass( Object.assign(baseData,child.childrenData[i],dataset,dataFromParent,groupData ),false)
|
||||
sub_child._omiChildStr = childStr
|
||||
sub_child.parent = child
|
||||
sub_child.$store = child.$store
|
||||
if(sub_child.$store){
|
||||
sub_child.$store.instances.push(sub_child)
|
||||
}
|
||||
sub_child.___omi_constructor_name = name
|
||||
sub_child._dataset = {}
|
||||
sub_child.install()
|
||||
|
|
18
src/omi.js
18
src/omi.js
|
@ -196,9 +196,17 @@ Omi.makeHTML= function(name, ctor) {
|
|||
Omi.customTags.push(name)
|
||||
}
|
||||
|
||||
Omi.render = function(component , renderTo , increment){
|
||||
Omi.render = function(component , renderTo , incrementOrOption){
|
||||
component.renderTo = typeof renderTo === "string" ? document.querySelector(renderTo) : renderTo
|
||||
component._omi_increment = increment
|
||||
if(typeof incrementOrOption === 'boolean') {
|
||||
component._omi_increment = incrementOrOption
|
||||
}else{
|
||||
component._omi_increment = incrementOrOption.increment
|
||||
component.$store = incrementOrOption.store
|
||||
if(component.$store){
|
||||
component.$store.instances.push(component)
|
||||
}
|
||||
}
|
||||
component.install()
|
||||
component._render(true)
|
||||
component._childrenInstalled(component)
|
||||
|
@ -267,10 +275,4 @@ Omi.mixIndexToArray = function(arr ,indexName){
|
|||
})
|
||||
}
|
||||
|
||||
Omi.useStore = function(store, autoUse){
|
||||
Omi.store = store
|
||||
Omi.dataFromGlobalStore = true
|
||||
Omi._autoUseGlobalStore = autoUse
|
||||
}
|
||||
|
||||
module.exports = Omi
|
Loading…
Reference in New Issue