WeX5数据绑定：value绑定

//.W片段
<p>Login name: <input bind-value="userName" /></p>
<p>Password: <input type="password" bind-value="userPassword" /></p>

//.js片段
//初始化空白块
this.userName=justep.Bind.observable(""); 

 this.userPassword=justep.Bind.observable("abc");

设置更新ViewModel的时间

在使用value绑定的时候，我们经常要将value绑定在input、textarea中。在默认情况下，当我们的input标签失去焦点的时候，才会触发ViewModel的改变。我们可以通过valueUpdate属性来控制何时来更新ViewModel。

• input：这种事件需要现代浏览器的支持（IE9+），当input、textarea输入时改变ViewModel。如果不考虑浏览器兼容问题，这种方式将是最好的。
• keyup：放开按键的时候改变ViewModel。
• keypress：按下按键的时候改变ViewModel
• afterkeydown：通过keydown事件来处理同步，算是一种比较好的同步方式。

示例代码：

//.W片段
<p>Your value: <input bind-value="someValue, valueUpdate: 'input'" /></p>
<p>You have typed: <span bind-text="someValue"></span></p>

//.js片段
this.someValue=justep.Bind.observable("edit me");

valueAllowUnset 属性

valueAllowUnset 只对select有用。示例代码：

//.W片段
<p>
 Select a country:
 <select bind-options="countries,
 optionsCaption: 'Choose one...',
 value: selectedCountry,
 valueAllowUnset: true"></select>
</p>

//.js片段
this.countries=['Japan', 'Bolivia', 'New Zealand'];
this.selectedCountry=justep.Bind.observable('Latvia');

在这段代码中，我们将valueAllowUnset设置为true，此时我们将value设置为“Lativia”时，列表中不存在此项，那么将会把selectedCountry设置为undefined，界面显示“Choose one…”项。

双向绑定、单项绑定和无绑定

示例代码：

//.W片段
<!-- 双向绑定，双向同步 -->
<p>First value: <input bind-value="firstValue" /></p>

<!-- 单项绑定，只能从textbox同步到model -->
<p>Second value: <input bind-value="secondValue" /></p>

<!-- 无绑定，textbox的改变不会引起任何改变 -->
<p>Third value: <input bind-value="secondValue.length > 8" /></p>

//.js片段
this.firstValue=justep.Bind.observable("hello");
this.secondValue="hello, again";

关于如何绑定可以在代码中看到。

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443