0

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

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

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 的初始值。

为了让选择显示从 myCar 加载的初始值，我需要向 viewModel 和/或标记添加什么？

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

谢谢你的帮助

4

1 回答 1

2

选择实际上正在正确初始化，正如您在打开列表框时看到的那样：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>
...

您可以通过运行应用绑定后强制更新选择：

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

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

另请参阅RP Niemeyer 的这个答案，了解如何为此使用自定义绑定。

于 2013-06-20T21:02:40.883 回答