mardi 10 janvier 2017

Update Route Model from Component

I'm new to Ember.js and I'm trying to create an application that mimics Youtube by using their API. Currently I have a route that is responsible for grabbing the initial information from the Youtube Api to populate the page on load. I have a search bar component that is used to gather the input from the user and repopulate the list with results based on the string. The problem is that while I am getting the input from the user my Route model is not refreshing to grab the update data from the api. Below is my code.

Template for my video route video.hbs:

// app/templates/video.hbs
<div class="row">
  
<div class="row">
  <div class="col-md-12">
    <hr>
    <br>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    <div class="row">
      
        <div class="col-md-4 pull-right video-container">
          
            <iframe id="video-player" src="https://www.youtube.com/embed/"></iframe>
          
            <iframe id="video-player" src="https://www.youtube.com/embed/kEpOF7vUymc"></iframe>
          
        </div>
      </div>
    </div>
  </div>
</div>

Template for my search bar

// 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">
        
      </div>
      <button type="submit" class="btn btn-success">Search</button>
    </form>
</div>

Component for my search bar

// 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();
    }
  }
});

Video Route

// 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 = "http://ift.tt/1hc4muC"+ 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;
        }
      });
    });
  }
});




Aucun commentaire:

Enregistrer un commentaire