From 3a1bd47a54fbd10ffe8b2b6723bc487e2f2821d5 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Mon, 17 Jun 2024 12:02:07 +0800
Subject: [PATCH] Update template

---
 template.md | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/template.md b/template.md
index 0c7a477..46bc7bc 100644
--- a/template.md
+++ b/template.md
@@ -74,6 +74,8 @@ class Foo extends Component {
 
 ### 条件渲染
 > 限制于原生的字符串模板的语法限制, 不支持复杂的流程语句, 所以只能用`三元表达式`等简单的表达式来实现。
+>> v1.12.0 起, 可使用`when()`方法代替三元表达式; `which()`方法代替`switch`流程语句。
+
 
 ```js
 
@@ -103,7 +105,7 @@ class Foo extends Component {
 ### 节点属性绑定
 > 这个, 在上一个例子中, 已经有用到了, 模板中的节点属性, 可以加引号, 也可以不加,  效果上完全一致, 区别只是不加引号有语法高亮。
 >> 另外, 还引入了一个特殊的绑定语法, 跟`vue`一样, 在属性名前加冒号`:`, 带冒号的属性, 赋值时是直接赋值的, 而不是调用`setAttribute()`, 即意味着, 你可以通过这种方式, 传递复杂的数据类型。
->>> 另外, 由于字符串模板的原理与`vue/react`等框架不一样, 无法实现双向绑定, 需要手动实现(详见下文)。
+>>> 另外, 由于字符串模板的原理与`vue/react`等框架不一样, 要实现双向绑定, 需要借助`live()`方法(详见下文)。
 
 
 
@@ -261,10 +263,14 @@ class Foo extends Component {
 
 
 ### 双向绑定
-> 上面提到过, 由于模板机制的原因。框架无法实现内置双向绑定。只能是开发者手动实现。实现的方式, 也比较简单, 就是手动监听一下相应的事件来自动更新属性值即可。
+> 上面提到过, 由于模板机制的原因, 双向绑定需要借助`live()`方法实现, 当然, 也可以自行监听事件实现。
+
+>> `注意:` `live()`方法是**v1.12.0**开始才支持。
 
 
 ```js
+import { html, live, Component } from 'wkit'
+
 class Foo extends Component {
 
   static props = {
@@ -272,7 +278,14 @@ class Foo extends Component {
   }
    
   render() {
-    return html`<input value=${this.value} @input=${ev => (this.value = ev.target.value)} >`
+    return html`
+      <!-- 自行监听input事件实现 -->
+      <input value=${this.value} @input=${ev => (this.value = ev.target.value)} >
+      
+      <!-- 借助live()实现 -->
+      <input value=${live.bind(this, 'value')} >
+    
+    `
   }
 
 }