0

JSON オブジェクトからマップされた Knockout オブジェクトがあります。そのノックアウト オブジェクトの値は、入力要素にデータ バインドされます。

また、Google Places オートコンプリートを同じ入力要素にバインドしました。

ノックアウト オブジェクトによって参照される値は、入力した内容の値を示します (選択されていないため、「バー」になります)。

入力ボックスの値は正しい値です (選択した場所は「バーネット、イギリス」です)。

これは、問題を示す JSFiddle です... http://jsfiddle.net/twistedinferno/CPEMk/

2 つの値が異なるのはなぜですか? 選択した値をバインド値として取得できますか? (できれば、私の KO オブジェクトに別のプロパティは必要ありません)

4

2 に答える 2

1

ここでJSFiddleを更新しました

これは正常な動作です。afterkeypressKnockout は、やなどの認識しているイベントへの値バインディングを登録しますblur。デフォルトでは、Google Places API などの他のフレームワークによって行われた変更を「検出」することはできません。したがって、機能させるには、他のフレームワークから Knockout にイベントをプッシュするコードを記述する必要があります。

この場合、Google Places Autocomplete API はplace_changedイベントをサポートしています。このイベントを更新した Fiddle に組み込み、実際の例を紹介しました。このイベントの詳細については、Google のドキュメントを参照してください。最も重要なビットは次のとおりです。

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    koObj.StartDescription(place.formatted_address);
    koObj.Name(place.name);
    koObj.Address(place.formatted_address);
});

ただし、この機能を複数回使用する場合は、この動作をカスタム Knockout バインディングでラップすることを強くお勧めします。

これは、カスタム Knockout バインディングに関する優れた記事です。最後の章までスクロールすると、サード パーティ コントロールをラップする Knockout バインディングの例が表示されます。Google プレイス オートコンプリートについても同じことを行う必要があるため、このコントロールの操作の 3 つの側面を処理できます。

  1. コントロールの初期化 (ウィジェットのオプションの構成オプションを使用)
  2. イベント ハンドラーを設定して、UI で行われた更新に応答する。place_changedこれは、イベントをラップすることによって実現されます。
  3. ビュー モデルに加えられた更新への対応。これは、シナリオでは必要ない場合があります。

カスタム ノックアウト バインディングを使用すると、次のようになります。

<input id="startDescription" type="text" data-bind="googleAutoComplete: StartDescription, googleAutoCompleteOptions: { componentRestrictions: { country: 'uk' } }" />

幸運を！

于 2012-08-28T16:07:37.217 に答える