uniqueName绑定用来为元素生成一个唯一的name属性，uniqueName绑定不常用到。 应用场景： 第三方js库需要元素有name属性的时候，我们可以使用uniqueName绑定为元素生成一个唯一的name属性。例如在jQuery validation中，就需要元素必须有一个name属性。 IE6下，radio button元素必须具有name属性，否则不能选中。对于radio button而言，name属性用来对一组radio button进行分组，因此貌似是必须的。但如果你的业务逻辑中真的不需要，那么我们也可以使用uniqueName绑定随机的生成一个唯一的name属性。   示例代码： <input bind-value="someModelProperty" bind-uniqueName= "true" /> 当参数值为true的时候，表示需要生成唯一name属性。 本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5! 阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443

options绑定用来绑定select控件的option项，它只能用在select元素中，并且绑定值必须为数组。对于单选的下拉列表，选中值用value绑定；对于多选的列表，选中值用selectedOptions绑定。 示例代码 单选列表 //.W片段 <p> Destination country: <select bind-options="availableCountries"></select> </p> //.js片段 availableCountries=justep.Bind.observableArray(['France', 'Germany', 'Spain']) 多选列表 //.W片段 <p> Choose some countries you would like to visit: <select bind-options="availableCountries" size="5" multiple="true"></select> </p> //.js片段 availableCountries=justep.Bind.observableArray(['France', [...]

template用来定义模板，并将模版用在指定的DOM绑定中。template的用处显而易见，可以更加清晰的定义代码，并能够方便的复用这些代码。 示例代码： //.W片段 <h2>Participants</h2> Here are the participants: <div bind-template="{ name: 'person-template', data: buyer }"></div> <div bind-template="{ name: 'person-template', data: seller }"></div> <script type="text/html" id="person-template"> <h3 bind-text="name"></h3> <p>Credits: <span bind-text="credits"></span></p> </script> //.js片段 this.buyer = [...]

with绑定用来创建一个绑定上下文，在子元素内的所有绑定都在这个上下文中进行。 示例代码： //.W片段 <h1 bind-text="city"> </h1> <p bind-with="coords"> Latitude: <span bind-text="latitude"> </span>, Longitude: <span bind-text="longitude"> </span> </p> //.js片段 city="London", coords= { latitude: 51.5001524, longitude: -0.1262362 } 在上面的代码中，我们为段落p标签指定了数据上下文coords，在它的子元素中，我们就可以直接绑定coords的属性latitude和longitude了。 另外，with绑定也可以使用虚拟标签： <ul> <li>Header element</li> <!-- [...]

foreach绑定用来处理数组，通常用来将一个数组绑定到一个列表或者table中。在foreach绑定中，我们可以使用if、with等嵌套绑定。 示例代码： //.W片段 <table> <thead> <tr><th>First name</th><th>Last name</th></tr> </thead> <tbody bind-foreach="people"> <tr> <td bind-text="firstName"></td> <td bind-text="lastName"></td> </tr> </tbody> </table> //.js片段 people=[ { firstName: 'Bert', lastName: 'Bertington' }, { firstName: 'Charles', lastName: 'Charlesforth' }, { [...]

自定义绑定（Custom Binding）允许我们通过代码实现自定义绑定规则，从而完成更高级的业务需求。 示例代码 //.js片段 justep.Bind.bindingHandlers.yourBindingName = { init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called when the binding is first applied to an element // Set up any initial [...]

selectedOptions绑定用在select元素中，用来绑定已选中的对象，通常被用在多选列表中。如果列表为单选列表（下拉列表），选中值可以用value绑定。 示例代码 //.W片段 <p> Choose some countries you'd like to visit: <select bind-options="availableCountries" bind-selectedOptions="chosenCountries" size="5" multiple="true"> </select> <button component="$UI/system/components/justep/button/button" class="btn btn-warning" bind-click="buttonClick">点我切换</button> </p> //.js片段 var Model = function(){ this.callParent(); this.availableCountries=justep.Bind.observableArray(['France', 'Germany', 'Spain']); this.chosenCountries=justep.Bind.observableArray(['Germany']); }; [...]

event绑定为DOM元素添加一个或多个事件，例如可以用来添加keypress、mouseover、mouseout等。由于DOM元素的事件较多，ko不可能像定义click绑定、submit绑定那样挨个的定义，因此提供了event绑定。 示例代码： //.W片段 <div> <div bind-event="{ mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div> <div bind-visible="detailsEnabled"> Details </div> </div> //.js片段 this.detailsEnabled = justep.Bind.observable(false); enableDetails=function () { this.detailsEnabled.set(true); }; this.disableDetails=function () { this.detailsEnabled.set(false); } [...]

if绑定 if绑定应用在页面元素中，并通过表达式判断是否为元素添加子元素的绑定。if绑定在功能上非常像visible绑定，但在实现上却有很大的不同。visible绑定是为元素添加css样式来控制元素是否显示，if绑定是控制元素的字元素，如果表达式为true，则为元素添加子元素，否则清空子元素。 示例代码： //.W片段 <label> <input type="checkbox" bind-checked="displayMessage" /> Display message </label> <div bind-if="displayMessage">Here is a message. Astonishing.</div> //.js片段 displayMessage=justep.Bind.observable(false); 当displayMessage为false的时候，div将会被清空；如果为true的时候，div里面的内容才会被添加到dom中显示。 ifnot绑定 ifnot绑定与if的功能相反，当表达式为true的时候，元素的内容会被清空，如果为false的时候，元素的内容会被添加到DOM中。 我们把上面的示例代码改成ifnot绑定： //.W片段 <label> <input type="checkbox" bind-checked="displayMessage" /> 隐藏消息 </label> [...]

value绑定将ViewModel的参数绑定在form元素中，当form元素与ViewModel的属性建立关联之后，form元素的改变将会直接修改ViewModel的数据。 示例代码： //.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> [...]