You can pass obj prop to child and trigger dom update now

This commit is contained in:
dntzhang 2018-10-14 13:42:46 +08:00
parent b1d55e28e9
commit d87e44b6cc
7 changed files with 42 additions and 37 deletions

View File

@ -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

View File

@ -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

View File

@ -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()
}
}

View File

@ -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;
}
}

View File

@ -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()
}