Knockout 和 jQuery Mobile:将数据绑定到选择列表 [英] Knockout and jQuery Mobile: Binding data to select lists
问题描述
我在同一个项目中同时使用 Knockout(2.0 版)和 jQuery Mobile(1.0.1 版).问题在于将数据绑定到选择列表.jQuery Mobile 以某种方式呈现选择列表，其中看似选定的值和实际列表是单独的元素.这是通过执行修复
I'm using both Knockout (version 2.0) and jQuery Mobile (version 1.0.1) in the same project. The problem is with binding data to select lists. jQuery Mobile presents select lists in a way where the seemingly selected value and the actual list are separate elements. This is fixed by executing
$(element).selectmenu('refresh', true);
更改列表或选定值后.根据我的经验，这是一种危险的情况，因为开发人员经常忘记刷新选择列表.
after changing either the list or the selected value. Based on my experience, this is a dangerous situation as developers often forget to refresh select list.
为了缓解这种情况，我编写了自己的 Knockout 绑定处理程序.这些值使用以下代码绑定到选择列表:
To ease this, I wrote my own Knockout binding handler. The values are bound to the select list with following code:
<select name="selection" data-bind="jqmOptions: values, optionsValue: 'id', optionsText: 'name', value: selectedValue">
</select>
jqmOptions 的实现:
The implementation of jqmOptions:
ko.bindingHandlers.jqmOptions = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
if (typeof ko.bindingHandlers.options.init !== 'undefined') {
ko.bindingHandlers.options.init(element, valueAccessor, allBindingsAccessor, viewModel);
}
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
if (typeof ko.bindingHandlers.options.update !== 'undefined') {
ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor, viewModel);
}
var instance = $.data(element, 'selectmenu');
if (instance) {
$(element).selectmenu('refresh', true);
}
}
};
这使用本机 options 绑定，但除此之外，它会在更改列表值后自动刷新选择列表.但是，当我更改所选值时，这会出现问题.如果我首先设置列表值，我的 jqmOptions 会刷新选择列表，但此时尚未设置所选值.我最终得到了一个选择列表，其中包含所有正确的值，并且在内部选择了正确的选项，但 jQuery Mobile 仍将默认值显示为选定的.
This uses the native options binding but in addition to that, it automatically refreshes select lists after changing the list values. There is a problem with this however when I'm changing the selected value. If I first set the list values, my jqmOptions refreshes the select list but at that point, the selected value is not yet set. I end up with a select list, which has all the correct values and internally the right option is selected, but jQuery Mobile still displays the default value as selected.
this.values(someArrayOfValues);
this.selectedValue(oneOfTheArrayValues);
Knockout 不允许我先设置选定的值，然后设置列表值，因为在这种情况下，当我设置选定的值时没有允许的值.因此选择的值总是未定义的.
Knockout doesn't allow me to first set the selected value and then setting the list values, because in this case there are no allowed values when I'm setting the selected value. Thus the selected value is always undefined.
有没有办法编写一个 Knockout 自定义绑定，它会在两种情况下刷新选择列表元素:更改列表值时和更改选定值时?
Is there a way to write a Knockout custom binding which would refresh the select list element in both cases: when changing the list value and when changing the selected value?
目前我用以下代码解决了这种情况:
Currently I solve this situation with following code:
this.values(someArrayOfValues);
this.selectedValue(oneOfTheArrayValues);
this.values(someArrayOfValues);
然而，这不是很优雅的解决方案，我想更好地解决它.
This is not very elegant solution however and I would like to solve it better.
推荐答案
根据我的个人经验(使用 jquerymobile 1.1.0 和 Knockoutjs 2.1.0)，我只使用了 jqmoptions(如所见在第一篇文章中)绑定到选择的有效淘汰赛绑定.要使值"绑定与选择一起使用，只需在绑定中将其声明为第一个
For my personal experience (with jquerymobile 1.1.0 and knockoutjs 2.1.0), I've only used jqmoptions (as seen in the first post) binding to have a valid knockout binding to a select. To make 'value' binding works with select, simply declare it as first in the binding
<select name="myname" id="myid" data-bind="value: myvalue, jqmoptions: myvalues, optionsValue: 'id', optionsText: 'desc'"></select>
看起来顺序是强制性的:http://goo.gl/nVbHc
Looks that the order is mandatory: http://goo.gl/nVbHc
这篇关于Knockout 和 jQuery Mobile:将数据绑定到选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
