淘汰赛和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 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 (如所见)在第一篇文章中)绑定，以将有效的敲除绑定到一个选择.要使值"绑定与select一起使用，只需在绑定中将其声明为第一个

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

这篇关于淘汰赛和jQuery Mobile:绑定数据以选择列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！