我在同一个项目中使用了Knockout(2.0版)和jQuery Mobile(1.0.1版).问题是将数据绑定到选择列表. jQuery Mobile以某种方式呈现选择列表,其中看似选择的值和实际列表是单独的元素.这是通过执行来修复的
$(element).selectmenu('refresh',true);
更改列表或所选值后.根据我的经验,这是一个危险的情况,因为开发人员经常忘记刷新选择列表.
为了缓解这个问题,我写了我自己的Knockout绑定处理程序.这些值与以下代码绑定到选择列表:
<select name="selection" data-bind="jqmOptions: values,optionsValue: 'id',optionsText: 'name',value: selectedValue"> </select>
执行jqmOptions:
ko.bindingHandlers.jqmOptions = { init: function (element,valueAccessor,allBindingsAccessor,viewmodel) { if (typeof ko.bindingHandlers.options.init !== 'undefined') { ko.bindingHandlers.options.init(element,viewmodel); } },update: function (element,viewmodel) { if (typeof ko.bindingHandlers.options.update !== 'undefined') { ko.bindingHandlers.options.update(element,viewmodel); } var instance = $.data(element,'selectmenu'); if (instance) { $(element).selectmenu('refresh',true); } } };
这使用本机选项绑定,但除此之外,它会在更改列表值后自动刷新选择列表.当我更改所选的值时,有一个问题.如果我首先设置列表值,我的jqmOptions将刷新选择列表,但是在这一点上,所选值尚未设置.我最终得到一个选择列表,它具有所有正确的值,内部选择了正确的选项,但是jQuery Mobile仍然显示默认值.
this.values(someArrayOfValues); this.selectedValue(oneOfTheArrayValues);
Knockout不允许我首先设置所选值,然后设置列表值,因为在这种情况下,当我设置所选值时,没有允许的值.因此,所选值始终未定义.
有没有办法编写一个Knockout自定义绑定,这将在两种情况下刷新选择列表元素:更改列表值和更改所选值时?
this.values(someArrayOfValues); this.selectedValue(oneOfTheArrayValues); this.values(someArrayOfValues);
解决方法
对于我的个人经验(使用jquerymobile 1.1.0和knockoutjs 2.1.0),我只使用jqmoptions(如第一篇文章中所见)绑定,以具有有效的敲除绑定到选择.要使’value’绑定与select一起使用,只需将其声明为绑定中的第一个
<select name="myname" id="myid" data-bind="value: myvalue,jqmoptions: myvalues,optionsText: 'desc'"></select>
看来订单是强制性的:http://goo.gl/nVbHc