コンポーネントからルートモデルを更新してください

Question

Ember.jsが新しく、APIを使用してYoutubeを模倣するアプリケーションを作成しようとしています。現在、YouTubeのApiから初期情報を取得してロード時にページを生成するルートを持っています。私は、ユーザーからの入力を収集し、文字列に基づいて結果をリストに再作成するために使用される検索バーコンポーネントがあります。問題は、ユーザーからの入力を取得している間に、RouteモデルがAPIから更新データを取得するためにリフレッシュしていないことです。以下は私のコードです。私のビデオルートvideo.hbsため

テンプレート：私の検索バーの私の検索バー用

// app/templates/components/search-bar.hbs 
<div class="col-md-12 col-md-offset-4"> 
    <form class="form-inline"> 
     <div class="form-group" onsubmit="return false"> 
     {{input type="text" class="form-control" value=search id="search" placeholder="Search Videos..."}} 
     </div> 
     <button type="submit" {{action "updateSearch"}}class="btn btn-success">Search</button> 
    </form> 
</div> 

コンポーネントの

// app/templates/video.hbs 
<div class="row"> 
    {{search-bar}} 
<div class="row"> 
    <div class="col-md-12"> 
    <hr> 
    <br> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-8"> 
    <div class="row"> 
     {{video-list model=model}} 
     <div class="col-md-4 pull-right video-container"> 
      {{#if videoId}} 
      <iframe id="video-player" src="https://www.youtube.com/embed/{{videoId}}"></iframe> 
      {{else}} 
      <iframe id="video-player" src="https://www.youtube.com/embed/kEpOF7vUymc"></iframe> 
      {{/if}} 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

テンプレート

// app/components/search-bar.js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 
    userSearch: "", 
    actions: { 
    updateSearch: function() { 
     this.set("userSearch", this.get("search")); 
     this.modelFor("videos").reload(); 
    } 
    } 
}); 

ビデオルート

// app/routes/video.js 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
    var userSearch = this.get("search") === undefined ? "Code" : this.get("search"); 
    this.set("search", userSearch); 
    var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&q="+ userSearch +"&maxResults=50&key="api key goes here"; 
    return Ember.$.getJSON(url).then(function(data) { 
     return data.items.filter(function(vid) { 
     if(vid.id.videoId) { 
      return vid; 
     } 
     }); 
    }); 
    } 
}); 

Answer 1

reload - モデルのフックメソッドを呼び出すことはありません、この場合には、あなたがビデオルートにアクションを送信することができ、そこからrefreshを試してみてください。

EDIT：

ご利用の場合のために、あなたのコードを調整する、それが仕事や、このアプローチでは何も間違っていないなら、私に教えてください。

アプリ/路線/にVideo.js
ここでは、multiple modelを返すためRSVP.hash機能を使用しています。私はuserSearchも含めています。このユースケースではquery parametersを実装する方が良いですが、使用せずに実装しました。

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    userSearch: '', 
    model: function() { 
     var userSearch = this.get("userSearch") === undefined ? "Code" : this.get("userSearch"); 
     var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + userSearch + "&maxResults=50&key=apikey"; 
     return Ember.RSVP.hash({ 
      videosList: Ember.$.getJSON(url).then(function(data) { 
       return data.items.filter(function(vid) { 
        if (vid.id.videoId) { 
         return vid; 
        } 
       }); 
      }), 
      userSearch: userSearch 
     }); 
    }, 
    actions: { 
     refreshRoute(userSearch) { 
      this.set('userSearch',userSearch); 
      this.refresh(); 
     }, 
    } 
}); 

アプリ/コントローラ/ viedo.js
それはrefreshRoute機能が含まれており、これは、ビデオ、ルートファイルで利用可能なrefreshRoute関数を呼び出します。私はuserSearch財産とrefreshRouteアクション名を渡しています

import Ember from 'ember'; 
export default Ember.Controller.extend({ 
    actions:{ 
     refreshRoute(userSearch){ 
      this.sendAction('refreshRoute',userSearch); 
     } 
    } 
}); 

アプリ/テンプレート/ video.hbs
1.検索バーにコンポーネント
2. videosListへのアクセス使用してmodel.videosList

<div class="row"> 
    {{search-bar userSearch=model.userSearch refreshRoute="refreshRoute"}} 
<div class="row"> 
    <div class="col-md-12"> 
    <hr> 
    <br> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-8"> 
    <div class="row"> 
     {{video-list model=model.videosList}} 
     <div class="col-md-4 pull-right video-container"> 
      {{#if videoId}} 
      <iframe id="video-player" src="https://www.youtube.com/embed/{{videoId}}"></iframe> 
      {{else}} 
      <iframe id="video-player" src="https://www.youtube.com/embed/kEpOF7vUymc"></iframe> 
      {{/if}} 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

app/components/search-bar.js
ここであなたは外部属性としてuserSearchプロパティを取得します。コンポーネントを含める際に引数として渡されます。

import Ember from 'ember'; 
export default Ember.Component.extend({ 
    userSearch:'',//external attributes 
    actions: { 
     updateSearch() { 
      var userSearch = this.get('userSearch'); 
      this.sendAction('refreshRoute',userSearch); //this will call corresponding controller refreshRoute method 
     } 
    } 
}); 

アプリ/テンプレート/コンポーネント/サーチbar.hbs

<div class="col-md-12 col-md-offset-4"> 
    <form class="form-inline"> 
     <div class="form-group" onsubmit="return false"> 
     {{input type="text" class="form-control" value=userSearch id="search" placeholder="Search Videos..."}} 
     </div> 
     <button type="submit" {{action "updateSearch"}}class="btn btn-success">Search</button> 
    </form> 
</div>