Update template
							parent
							
								
									a5a68001c6
								
							
						
					
					
						commit
						4f45bd7e5a
					
				
							
								
								
									
										55
									
								
								template.md
								
								
								
								
							
							
								
								
								
								
									
									
								
								
								
							
						
						
									
										55
									
								
								template.md
								
								
								
								
							| 
						 | 
				
			
			@ -239,7 +239,7 @@ class Foo extends Component {
 | 
			
		|||
对组件内的节点配置动画
 | 
			
		||||
 | 
			
		||||
```js
 | 
			
		||||
class Foo extends {
 | 
			
		||||
class Foo extends Component {
 | 
			
		||||
   
 | 
			
		||||
  render() {
 | 
			
		||||
    // 配置同上
 | 
			
		||||
| 
						 | 
				
			
			@ -261,15 +261,50 @@ class Foo extends {
 | 
			
		|||
 | 
			
		||||
 | 
			
		||||
### 双向绑定
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
> 上面提到过, 由于模板机制的原因。框架无法实现内置双向绑定。只能是开发者手动实现。实现的方式, 也比较简单, 就是手动监听一下相应的事件来自动更新属性值即可。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```js
 | 
			
		||||
class Foo extends Component {
 | 
			
		||||
 | 
			
		||||
  static props = {
 | 
			
		||||
    value: ''
 | 
			
		||||
  }
 | 
			
		||||
   
 | 
			
		||||
  render() {
 | 
			
		||||
    return html`<input value=${this.value} @input=${ev => (this.value = ev.target.value)} >`
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
### 属性绑定之样式设置
 | 
			
		||||
> `style`和`class`这2种设置样式的属性, 比较特殊, 往往会有多个值, 以及多种条件, 所以框架内置了2个方法`classMap`和`styleMap`, 用于简化绑定设置。
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```js
 | 
			
		||||
 | 
			
		||||
let classes = classMap({
 | 
			
		||||
    foo: true,
 | 
			
		||||
    bar: this.bar,
 | 
			
		||||
    ['goo-' + this.id]: true
 | 
			
		||||
})
 | 
			
		||||
let styles = styleMap({
 | 
			
		||||
    width: '888px',
 | 
			
		||||
    height: '200px',
 | 
			
		||||
    backgroundColor: '#f30'
 | 
			
		||||
  })
 | 
			
		||||
 | 
			
		||||
html`
 | 
			
		||||
  <div class=${classes} style=${styles}>demo</div>
 | 
			
		||||
`
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue