Обновить модель маршрута от компонента

Question

Я новичок в Ember.js, и я пытаюсь создать приложение, которое имитирует Youtube с помощью их API. В настоящее время у меня есть маршрут, который отвечает за захват исходной информации из Youtube Api, чтобы заполнить страницу при загрузке. У меня есть компонент панели поиска, который используется для сбора ввода от пользователя и повторного заполнения списка с результатами на основе строки. Проблема в том, что пока я получаю данные от пользователя, моя модель маршрута не освежает, чтобы захватить данные обновления из api. Ниже мой код.

Шаблон для моих видео маршрут video.hbs:

// 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/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/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
Здесь мы используем функцию RSVP.hash для возвращения multiple model. Я включаю 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 доступны в файле видео маршрута.

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

приложение/шаблоны/video.hbs
1. Я передаю userSearch собственности и refreshRoute имя действия для поиска бар компонент
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
Здесь вы w ill получает свойство 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>