You can pass obj prop to child and trigger dom update now
This commit is contained in:
parent
b1d55e28e9
commit
d87e44b6cc
|
@ -327,7 +327,15 @@
|
|||
if (value == null || value === false) {
|
||||
if (ns) node.removeAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase());else node.removeAttribute(name);
|
||||
} else if (typeof value !== 'function') {
|
||||
if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);else node.setAttribute(name, value);
|
||||
if (typeof value === 'string') {
|
||||
if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);else node.setAttribute(name, value);
|
||||
node.props[name] = value;
|
||||
} else {
|
||||
//can not trigger observedAttributes, so diff prop value here
|
||||
console.log(JSON.stringify(node.props[name]));
|
||||
console.log(SON.stringify(value));
|
||||
node.props[name] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -633,18 +641,11 @@
|
|||
}
|
||||
|
||||
WeElement.prototype.connectedCallback = function connectedCallback() {
|
||||
var _this2 = this;
|
||||
|
||||
this.install();
|
||||
var names = this.getAttributeNames();
|
||||
|
||||
names.forEach(function (name) {
|
||||
_this2.props[npn(name)] = _this2.getAttribute(name);
|
||||
});
|
||||
|
||||
var shadowRoot = this.attachShadow({ mode: 'open' });
|
||||
|
||||
shadowRoot.appendChild(cssToDom(this.css()));
|
||||
this.css && shadowRoot.appendChild(cssToDom(this.css()));
|
||||
this.host = diff(null, this.render(this.props, this.data), {}, false, null, false);
|
||||
shadowRoot.appendChild(this.host);
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -327,11 +327,11 @@
|
|||
if (value == null || value === false) {
|
||||
if (ns) node.removeAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase());else node.removeAttribute(name);
|
||||
} else if (typeof value !== 'function') {
|
||||
if (typeof value === 'string') {
|
||||
if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);else node.setAttribute(name, value);
|
||||
node.props[name] = value;
|
||||
if (ns) {
|
||||
node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);
|
||||
node.props[name.toLowerCase()] = value;
|
||||
} else {
|
||||
//can not trigger observedAttributes
|
||||
node.setAttribute(name, value);
|
||||
node.props[name] = value;
|
||||
}
|
||||
}
|
||||
|
@ -606,15 +606,22 @@
|
|||
for (name in old) {
|
||||
if (!(attrs && attrs[name] != null) && old[name] != null) {
|
||||
setAccessor(dom, name, old[name], old[name] = undefined, isSvgMode);
|
||||
delete dom.props[name];
|
||||
}
|
||||
}
|
||||
|
||||
var update = false;
|
||||
// add new & update changed attributes
|
||||
for (name in attrs) {
|
||||
if (name !== 'children' && name !== 'innerHTML' && (!(name in old) || attrs[name] !== (name === 'value' || name === 'checked' ? dom[name] : old[name]))) {
|
||||
if (typeof attrs[name] === 'object') {
|
||||
// todo diff??
|
||||
dom.props[name] = attrs[name];
|
||||
update = true;
|
||||
} else if (name !== 'children' && name !== 'innerHTML' && (!(name in old) || attrs[name] !== (name === 'value' || name === 'checked' ? dom[name] : old[name]))) {
|
||||
setAccessor(dom, name, old[name], old[name] = attrs[name], isSvgMode);
|
||||
}
|
||||
}
|
||||
|
||||
update && dom.update();
|
||||
}
|
||||
|
||||
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||
|
@ -729,7 +736,6 @@
|
|||
}
|
||||
|
||||
TodoList.prototype.render = function render$$1(props) {
|
||||
console.log(props);
|
||||
return Omi.h(
|
||||
'ul',
|
||||
null,
|
||||
|
@ -763,9 +769,6 @@
|
|||
}
|
||||
|
||||
TodoApp.prototype.render = function render$$1() {
|
||||
var _this3 = this;
|
||||
|
||||
console.log(this.data.items);
|
||||
return Omi.h(
|
||||
'div',
|
||||
null,
|
||||
|
@ -774,9 +777,7 @@
|
|||
null,
|
||||
'TODO'
|
||||
),
|
||||
Omi.h('todo-list', { ref: function ref(e) {
|
||||
_this3.list = e;
|
||||
}, items: this.data.items }),
|
||||
Omi.h('todo-list', { items: this.data.items }),
|
||||
Omi.h(
|
||||
'form',
|
||||
{ onSubmit: this.handleSubmit },
|
||||
|
@ -810,7 +811,6 @@
|
|||
});
|
||||
this.data.text = '';
|
||||
this.update();
|
||||
this.list.update();
|
||||
};
|
||||
|
||||
return TodoApp;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -2,7 +2,6 @@ import { render, WeElement } from '../../src/omi'
|
|||
|
||||
class TodoList extends WeElement {
|
||||
render(props) {
|
||||
console.log(props)
|
||||
return (
|
||||
<ul>
|
||||
{this.props.items.map(item => (
|
||||
|
@ -24,11 +23,10 @@ class TodoApp extends WeElement {
|
|||
}
|
||||
|
||||
render() {
|
||||
console.log(this.data.items)
|
||||
return (
|
||||
<div>
|
||||
<h3>TODO</h3>
|
||||
<todo-list ref={(e)=>{this.list=e}} items={this.data.items} />
|
||||
<todo-list items={this.data.items} />
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input
|
||||
id="new-todo"
|
||||
|
@ -58,7 +56,6 @@ class TodoApp extends WeElement {
|
|||
})
|
||||
this.data.text = ''
|
||||
this.update()
|
||||
this.list.update()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -122,12 +122,12 @@ export function setAccessor(node, name, old, value, isSvg) {
|
|||
else node.removeAttribute(name);
|
||||
}
|
||||
else if (typeof value!=='function') {
|
||||
if(typeof value === 'string'){
|
||||
if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);
|
||||
else node.setAttribute(name, value);
|
||||
node.props[name] = value;
|
||||
} else {
|
||||
//can not trigger observedAttributes
|
||||
if (ns) {
|
||||
node.setAttributeNS('http://www.w3.org/1999/xlink', name.toLowerCase(), value);
|
||||
node.props[name.toLowerCase()] = value;
|
||||
}
|
||||
else {
|
||||
node.setAttribute(name, value);
|
||||
node.props[name] = value;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -281,13 +281,20 @@ function diffAttributes(dom, attrs, old) {
|
|||
for (name in old) {
|
||||
if (!(attrs && attrs[name]!=null) && old[name]!=null) {
|
||||
setAccessor(dom, name, old[name], old[name] = undefined, isSvgMode);
|
||||
delete dom.props[name]
|
||||
}
|
||||
}
|
||||
|
||||
let update = false
|
||||
// add new & update changed attributes
|
||||
for (name in attrs) {
|
||||
if (name!=='children' && name!=='innerHTML' && (!(name in old) || attrs[name]!==(name==='value' || name==='checked' ? dom[name] : old[name]))) {
|
||||
if(typeof attrs[name] === 'object'){
|
||||
// todo diff??
|
||||
dom.props[name] = attrs[name]
|
||||
update = true
|
||||
} else if (name!=='children' && name!=='innerHTML' && (!(name in old) || attrs[name]!==(name==='value' || name==='checked' ? dom[name] : old[name]))) {
|
||||
setAccessor(dom, name, old[name], old[name] = attrs[name], isSvgMode);
|
||||
}
|
||||
}
|
||||
|
||||
update && dom.update()
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue