Question

更新：正如nemesv在下面所说，代码适用于本机淘汰赛。一旦我添加JQM 1.20，select就不会初始化。这是小提琴http://jsfiddle.net/woodsman/fYPW4/1/ 如果选中JQM 1.2框并重新运行，您将看到select没有初始化。我是否需要刷新类似于jqm listview的选择？

原始邮寄：我正在尝试使用Knockout模拟一个简单的CRUD页面来绑定一个组合框/ select元素。我们的想法是加载myCar并使用combobox / select元素编辑汽车模型以更新外键ID，然后可以将其保存回数据库。我有以下非常简单的视图/ viewModel来模拟数据：

var ViewModel = function () {
self.myCar = { owner: ko.observable('Joe'), modelId: ko.observable(3) };
self.models = ko.observableArray(
    [{id:1, name:'Ford'},
    {id:2, name:'Toyota'},
    {id:3, name:'Audi'},
    {id:4, name:'BMW'}]
    );  
};

$(document).one("wijappviewpageinit", function () {
var vm = new ViewModel();
ko.applyBindings(vm);
 });

<div data-role="appviewpage" >
<div data-role="content">
    <select data-bind="options: models, optionsText: 'name', value: myCar.modelId, optionsValue: 'id'"></select>

    <label>Owner from myCar.owner</label>
    <h2 data-bind="text: myCar.owner"></h2> 

    <label>Id from Select</label>
    <h2 data-bind="text: myCar.modelId"></h2> 

    <label>Input To verify 2-Way binding</label>
    <input type="number" data-bind="value: myCar.modelId"/> 
</div>
<script src="../../js/wijcombotest.js"></script>

加载工作正常后事件的绑定。如果我做出选择，myCar中的modelId会更新。如果我更新输入中的id，则选择更新。我唯一的问题是在初始加载时，select没有显示myCar.modelId的初始值。

我需要添加到viewModel和/或标记中以使select显示从myCar加载的初始值？

仅供参考，我认为这不重要，但我在JQueryMobile和Wijmo Appview中实现。

感谢您的帮助

Answer 1

选择实际上是正确初始化，正如您在打开列表框时看到的那样：选择了正确的项Audi。问题是jQuery Mobile在select的顶部添加了一个图层，用于控件的样式。

最初没有正确填写：

<span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text"><span>
...

手动选择后：

<span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">
        <span>Audi</span>
    </span>
...

通过运行：

应用绑定后，您可以force an update选择

$('#myselect').selectmenu('refresh');

更新了小提琴：http://jsfiddle.net/fYPW4/2/

另请参阅RP Niemeyer的this answer，了解如何使用自定义绑定。

如何使用Knockout为CRUD页面初始化Select / Combobox - jQuery Mobile

1 个答案: