星空网 > 软件开发 > Java

KnockoutJS 3.X API 第四章 表单绑定 selectedOptions、uniqueName绑定

selectedOptions绑定目的

selectedOptions绑定控制当前选择多选列表中的哪些元素。 这旨在与<select>元素和选项绑定结合使用。

当用户选择或取消选择多选列表中的项目时,这会在视图模型上的数组中添加或删除相应的值。 同样,假设它是您的视图模型上的一个observable数组,那么每当您添加或删除(例如,通过push或splice)项到此数组时,UI中的相应项目将被选中或取消选择。 这是一个双向绑定。

注意:要控制选择单选择下拉列表中的哪个元素,可以改用value绑定。

示例

Choose some countries you'd like to visit:


源码:

<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">  var viewModel = {    availableCountries : ko.observableArray(['France', 'Germany', 'Spain']),    chosenCountries : ko.observableArray(['Germany']) // Initially, only Germany is selected  };     // ... then later ...  viewModel.chosenCountries.push('France'); // Now France is selected too</script>

参数

这应该是一个数组(或一个observable数组)。 KO设置元素的选定选项以匹配数组的内容。 任何先前的选择状态将被覆盖。

如果你的参数是一个observable数组,绑定将更新元素的选择每当数组改变(例如,通过push,pop或其他observable数组方法)。 如果参数不可观察,它将只设置元素的选择状态一次,并且不会在以后再次更新。

无论参数是否是可观察的数组,KO都将检测用户何时选择或取消选择多重选择列表中的项目,并将更新该数组以匹配。 这是您如何读取选择的选项。

备注:让用户从任意JavaScript对象中进行选择

在上面的示例代码中,用户可以从字符串值数组中选择。 如果你愿意 ,你的选项数组可以包含任意的JavaScript对象。 有关如何控制任何对象在列表中的显示方式的详细信息,请参阅options绑定。

在这种情况下,可以使用selectedOptions读取和写入那些对象本身的值,而不是它们的文本表示。  您的视图模型可以想象用户从任意对象的数组中选择,而不必关心这些对象如何映射到屏幕上的。

uniqueName绑定目的

uniqueName绑定确保关联的DOM元素具有非空的名称属性。 如果DOM元素没有name属性,则此绑定将赋予它一个并将其设置为一些唯一的字符串值。

你不需要经常使用这个。 它只在少数情况下有用,例如:

  • 其他技术可能取决于某些元素具有名称的假设,即使在使用KO时名称可能不相关。 例如,jQuery Validation目前仅验证具有名称的元素。 要使用Knockout UI,有时需要应用uniqueName绑定以避免混淆jQuery验证。

  • 如果他们没有name属性,IE 6不允许检查单选按钮。 大多数时候这是不相关的,因为你的单选按钮元素将具有名称属性,将它们放入互斥组。 但是,为了防止您没有添加名称属性,KO将在这些元素内部使用uniqueName,以确保可以检查。

例如:

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

参数

传递true(或某些值为true)以启用唯一的Name绑定,如前面的示例所示。

 

章节结语

至此,KnockoutJS 3.X的所有表单绑定介绍完毕。从下一章开始介绍KnockoutJS的一些高级应用。尽请期待~




原标题:KnockoutJS 3.X API 第四章 表单绑定 selectedOptions、uniqueName绑定

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流