0

更新: nemesv が以下に示すように、コードはネイティブ ノックアウトで正常に動作します。JQM 1.20 を追加するとすぐに、選択が初期化されません。ここにフィドルがありますhttp://jsfiddle.net/woodsman/fYPW4/1/ JQM 1.2ボックスをチェックして再実行すると、選択が初期化されないことがわかります。jqm リストビューと同様に選択を更新する必要がありますか?

元の投稿: ノックアウトを使用してコンボ ボックス/選択要素をバインドする単純な CRUD ページをシミュレートしようとしています。myCar をロードし、combobox/select 要素を使用して車のモデルを編集し、データベースに保存できる外部キー 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 を更新すると、select が更新されます。私が持っている唯一の問題は、初期ロード時です。選択すると、myCar.modelId の初期値が表示されません。

myCar から読み込まれた初期値を select に表示するには、viewModel やマークアップに何を追加する必要がありますか?

参考までに、それは問題ではないと思いますが、JQueryMobile と Wijmo Appview で実装しています。

ご協力いただきありがとうございます

4

1 に答える 1

2

リストボックスを開いたときにわかるように、選択は実際には適切に初期化されています。正しい項目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>
...

次のコマンドを実行して、バインディングを適用した後に選択を強制的に更新できます。

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

更新されたフィドル: http://jsfiddle.net/fYPW4/2/

これにカスタムバインディングを使用する方法については、RP Niemeyer によるこの回答も参照してください。

于 2013-06-20T21:02:40.883 に答える