如何初始化选择/组合框使用Knockout为CRUD页面- jQuery移动版

Question

更新:正如nemesv下面所说的，代码可以很好地使用本机淘汰。只要添加JQM 1.20，选择就不会初始化。这是小提琴http://jsfiddle.net/woodsman/fYPW4/1/如果选中JQM 1.2框并重新运行，您将看到选择没有初始化。我需要像jqm listview一样刷新选择吗?

原始文章:我试图模拟一个简单的CRUD页面，使用Knockout绑定一个组合框/选择元素。我们的想法是加载myCar并使用combobox/select元素编辑car的模型，以更新外键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，选择也会更新。我遇到的唯一问题是在初始加载时，选择不显示myCar.modelId的初始值。

我需要添加什么到viewModel和/或标记，以便有选择显示从myCar加载的初始值?

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

谢谢你的帮助

Answer 1

选择实际上是正确初始化的，当您打开列表框时可以看到:选择了正确的项目Audi。问题是jQuery Mobile在选择控件的样式上添加了一个层。

最初没有正确填充:

<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>
...

您可以在应用绑定后执行以下命令强制更新select:

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

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

请参阅RP Niemeyer的回答，了解如何使用自定义绑定。