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