Question

我是Ember.js的新手，我正在尝试使用他们的API创建一个模仿Youtube的应用程序。目前我有一条路线负责从Youtube Api获取初始信息以在加载时填充页面。我有一个搜索栏组件，用于收集用户的输入并使用基于字符串的结果重新填充列表。问题是，当我从用户那里得到输入时，我的Route模型没有刷新来从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。

编辑：

根据您的用例调整代码，让我知道这种方法是否有用或有什么问题。

应用/路由/了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>

应用/组件/搜索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>

从组件更新路径模型

1 个答案: