Ember 2.xサーバーから供給されたデータでリンクされたドロップダウンを行う方法

Question

私はこの最初の足場を見つけることができないようです。私は欲しいものをやっているような古い1.xの方法をいくつか見つけましたが、常にハードコードされた配列からです。

簡単に言えば、サーバーからデータを取得するStatesドロップダウンが必要です。ユーザーが状態を選択すると、私のサーバーからその状態の郡のリストを取得するために、郡をドロップダウンする必要があります。

ストレートAjaxとJSでかなり簡単ですが、Ember 2.xのやり方を学ぶのは難解です。

これを行うために必要な技術を示すgitプロジェクト、jsbins、twiddlesなどはありますか？それともチュートリアルをするのに冒険好きな人ですか？

Answer 1

exampleは、公式のガイドember-power-selectから見ることができます。この例では、githubリポジトリからデータを取得しています。その使い方はかなり簡単です。

のjsファイルは、次のとおりです：

import Ember from 'ember'; 
import config from '../../config/environment'; 

export default Ember.Component.extend({ 
    company: null, 
    router: Ember.inject.service('-routing'), 

    ajax: Ember.inject.service(), 
    countyNames: Ember.computed('company.state', function() { 
    return this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json.map((county)=> { 
     return county.name; 
    }); 
    }), 

    states: ['AK', 'AL', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VT', 'WA', 'WI', 'WV', 'WY'], 

    actions: { 
    // For dropdown handling 
    chooseState(state) { 
     this.set('company.state', state); 
    }, 

    chooseCounty(countyName) { 
     this.set('company.county', countyName); 
    } 
}); 

テンプレートは次のとおりです。

{{#power-select 
    selected=company.state 
    options=states 
    onchange=(action "chooseState") 
    as |name| 
    }} 
    {{name}} 
    {{/power-select}} 

    {{#power-select 
    selected=company.county 
    options=countyNames 
    onchange=(action "chooseCounty") 
    as |name| 
    }} 
    {{name}} 
    {{/power-select}} 

あなたが持っている答えに問題あなたは、私は次の変更を示唆して提供してきた答えについて

それが提供される。文字列（company.county）である郡のドロップダウンの選択を提供しています。郡のoptionsはjsonオブジェクトです。したがって、 2番目のドロップダウンは選択すると空になります。しかし、2番目のドロップダウンの初期値を表示するには、最初の選択状態の郡名を取得する必要があります。これらの2つの問題を克服するために、私は郡のドロップダウンのオプションになる計算プロパティーcountyNamesを定義しました。それはcompany.stateに依存します。したがって、会社の状態が変わるたびに、再計算されます。また、郡の名前のみを含むように定義して、選択時にドロップダウンの選択値が表示されるようにしました。試していないので、私が提供したコードスニペットにいくつかのタイプミスがあるはずです。しかし、私のポイントを理解するのに十分であることを願っています。宜しくお願いします。

Answer 2

@alptugdが私に正しい方向を向けるようにしてくれてありがとう。ここでは、私がやったことですけれども下記を参照してください、私はそれを洗練いくつかの助けが必要：

私は2つのドロップダウン、状態用とのための1つを置く（ドロップダウンが存在する場所）私のコンポーネントでember-power-select

インストール郡（その会社はここで私のモデルであることに注意）：

{{#power-select 
    selected=company.state 
    options=states 
    onchange=(action "chooseState") 
    as |name| 
    }} 
    {{name}} 
    {{/power-select}} 

    {{#power-select 
    selected=company.county 
    options=counties 
    onchange=(action "chooseCounty") 
    as |name| 
    }} 
    {{name.countyName}} 
    {{/power-select}} 

ザ・コンポーネントのJSファイルに：

import Ember from 'ember'; 
import config from '../../config/environment'; 

export default Ember.Component.extend({ 
    company: null, 
    router: Ember.inject.service('-routing'), 

    ajax: Ember.inject.service(), 
    counties: [], 

    states: ['AK', 'AL', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VT', 'WA', 'WI', 'WV', 'WY'], 

    actions: { 
    // For dropdown handling 
    chooseState(state) { 
     this.set('company.state', state); 
     //Ember.set(this, "counties", this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json.items)); 
     this.set('counties', this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json)); 
    }, 

    chooseCounty(county) { 
     this.set('company.county', county.countyName); 
    } 
}); 

は今、私はヘクタール何について少し説明しましょうppening。

アクションが呼び出され（onchange=(action "chooseState")）、モデルのcompany.state値が設定され、Ajaxを使用してその状態の郡が取得され、その結果がコンポーネントのcounties変数に割り当てられます。郡がドロップダウンすると、このcounties変数（ 'options = counties'）から値が取得され、自動的に新しい値がレンダリングされます。

私の場合、APIはオブジェクトの配列を返すようになっています。これは、ドロップダウンに表示する値を指定する必要があることを意味し、私はこの行のテンプレートでそれを行います：{{name.countyName}}文字列のリストを取得している場合は、単に{{name}}とすることができます。私はモデルに適切な値を返す必要があります。私はchooseCountyアクションでそれを行います。

これは私が他の人が私がダイヤルイン役立つことを願って二つの問題で、動作します。

まず、あなたは郡を選択するいくつかの理由で、ドロップダウンは空白のままです。アクションが呼び出され、モデルが更新され、レコードを保存すると、データベースはすべて正常です。

第2に、最初に郡のドロップダウンをどこに配置するのかわかりません。モデルがロードされた後でこれを行う必要がありますので、私たちはどの状態にあるのかを知ります。