Knockout.Js官网学习(selectedOptions绑定、uniqueName 绑定)

简介: selectedOptions绑定 selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的元素上。 当用户在multi-select列表选择或反选一个项的时候,会将view model的数组进行相应的添加或者删除。

selectedOptions绑定

selectedOptions绑定用于控制multi-select列表已经被选择的元素,用在使用options绑定的<select>元素上。

当用户在multi-select列表选择或反选一个项的时候,会将view model的数组进行相应的添加或者删除。同样,如果view model上的这个数组是observable数组的话,你添加或者删除任何item(通过push或者splice)的时候,相应的UI界面里的option项也会被选择上或者反选。这种方式是2-way绑定。

注:控制single-select下拉菜单选择项,你可以使用value绑定。

示例代码

<p>    Choose some countries you'd like to visit:    
    <select data-bind="options: availableCountries, selectedOptions: chosenCountries" size="5" multiple="true">   
    </select>
</p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>  
<script type="text/javascript">    
    var viewModel = {       
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain']),   
        chosenCountries: ko.observableArray(['Germany'])
    };
    ko.applyBindings(viewModel);
    viewModel.chosenCountries.push('France');
</script>

该参数是数组(或observable数组)。KO设置元素的已选项为和数组里match的项,之前的已选择项将被覆盖。

如果参数是依赖监控属性observable数组,那元素的已选择项selected options项将根据参数值的变化(通过push,pop,或其它observable数组方法)而更新,如果不是,那元素的已选择项selected options将只设置一次并且以后不在更新。

不管该参数是不是observable数组,用户在multi-select列表里选择或者反选的时候,KO都会探测到,并且更新数组里的对象以达到同步的结果。这样你就可以获取options已选项。

支持让用户选择任意JavaScript对象

在上面的例子里,用户可以选择数组里的字符串值,但是选择不限于字符串,如果你愿意你可以声明包含任意JavaScript对象的数组,查看options绑定如何显示JavaScript对象到列表里。

这种场景,你可以用selectedOptions来读取或设置这些对象本身,而不是页面上显示的option表示形式,这样做在大部分情况下都非常清晰。view model就可以探测到你从数组对象里选择的项了,而不必关注每个项和页面上展示的option项是如何map的。

uniqueName绑定

 uniqueName绑定确保所绑定的元素有一个非空的name属性。如果该元素没有name属性,那绑定会给它设置一个unique的字符串值作为name属性。你不会经常用到它,只有在某些特殊的场景下才用到。

  1.在使用KO的时候,一些技术可能依赖于某些元素的name属性,尽快他们没有什么意义。例如,jQuery Validation验证当前只验证有name属性的元素。为配合Knockout UI使用,有些时候需要使用uniqueName绑定避免让jQuery Validation验证出错。

  2.IE 6下,如果radio button没有name属性是不允许被checked了。大部分时候都没问题,因为大部分时候radio button元素都会有name属性的作为一组互相的group。不过,如果你没声明,KO内部会在这些元素上使用uniqueName那么以确保他们可以被checked。

 例如:

<input data-bind="value: someModelProperty, uniqueName: true"/>

 就像上面的例子一样,传入true(或者可以转成true的值)以启用uniqueName绑定。

目录
相关文章
|
12月前
|
JavaScript 前端开发 开发者
JavaScript中的箭头函数:简洁的语法与this绑定
JavaScript中的箭头函数:简洁的语法与this绑定
584 184
|
12月前
|
前端开发 JavaScript
JavaScript中的箭头函数:简洁与this绑定
JavaScript中的箭头函数:简洁与this绑定
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
481 0
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
466 5
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
261 2
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
278 1
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
768 1
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
281 2
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
154 2
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
273 1