Ember.js 如何使用Ember为Solr服务构建类似google的搜索界面

我是Ember的新手，正在尝试为SolrAPI实现一个类似Google的搜索接口。i、 e.我希望结果在您键入时在页面上自动更新

我的第一个想法是创建一个可重用的TextSearchCollectionView，它有两个子视图SearchInput和SearchResults

输入SearchInput将触发一个事件，该事件将被TextSearch CollectionView捕获，它将更新SearchResult子元素

我获得了生成的事件，但TextSearch ContainerView无法使用操作、函数或事件管理器截获事件。但是，出于某种原因，我可以在IndexController中拦截事件，但我需要在可重用的TextSearch CollectionView中处理它（我认为）

最后，我无法更新SearchResults中的视图（当我尝试在IndexController中处理事件时），并且SearchResult模型在页面加载时没有启动

我在恩伯是新来的，所以我肯定我在这里做了些傻事。要达到这一点，还有很长的路要走

任何建议都将不胜感激

巴斯德宾：

HTML:

更新 非常感谢你的帮助，杰里米，这就是我需要的全部信息。太棒了

以下是一些经验教训：

在使用结果之前，您必须等待JSON承诺的解析，如下所示：

search: function(search) {
  var results = App.TextSearch.find(search);
  var _this = this;
  // results is a jquery promise, wait for it to resolve
  // Ember can't resolve it automatically
  results.then(function(results){
    _this.get('controllers.searchResults').set('model', results);
  });
  return false;
}

我没有意识到视图、渲染和控制器之间的区别（虽然没有那么好的文档记录，但谷歌搜索会告诉你）。但是这些与“部分”助手有什么关系呢？不确定

通过将“&json.wrf=？”添加到Solr URL的末尾，可以避免由于XSS安全性而在浏览器中阻止调用

对于如何从视图中引用模型，余烬文档让我感到非常困惑。这是正确的方法（对于本例）：

实际上，删除此控制器会导致Javascript错误：

Assertion failed: <App.TextSearchController:ember242> needs controller:searchResults but it does not exist 

请注意:

JSBin使用了几个月前的EmbeJSRC6。在“action”属性中包装事件处理程序的上述更改似乎是在RC6之后引入的。如果您使用的是最新版本的Ember（您应该这样做），那么您的（事件）代码将无法在JSBin中工作（使用默认的Ember库）。但是，如果不使用动作包装器，则代码将无法在浏览器中工作。哼请参阅github.com/emberjs/ember.js/releases

因此，在下面的JSBin示例中，我从事件处理程序中删除了“action:”标记，因此应用程序将运行

我还做了一些小的设计更改：

• 我将搜索事件处理程序从InputController移动到 而是包含TextSearchController，以便解耦 从SearchResultsController输入控制器
• 我还删除了 在页面加载时进行初始搜索，因此用户从一张白板开始
• 最后，我删除了TextSearch对象，并移动了solr 而是集成到TextSearchController

最终版本可在此处找到：

杰里米，非常感谢你的帮助。没有你我不可能做到。我一定会提前付款的

---

非常感谢

您的jsbin已经非常接近了，有两种不同的方法可以解决这个问题

不要直接使用视图，而是使用

render

。通常，您不希望直接实例化视图。这样做时，不会为每个视图提供不同的控制器。相反，每个视图最终都连接到渲染开始的主控制器。在这种情况下，

App.IndexController

。与直接使用

{{view App.TextSearchView}

实例化视图相比，更好的方法是使用

{{render“textSearch”}

。使用

render

意味着您可以获得支持每个不同视图/模板的控制器。如果将

search

方法置于

App.SearchInputController

上，则会调用该方法

下面是一个基于渲染的jsbin：

继续使用视图。如果您确实想继续直接实例化视图，请注意上下文中的控制器是您的

App.IndexController

。在这种情况下，您的

搜索

方法和

查询

属性都需要位于

App.IndexController

上，并且您不需要

App.SearchInputController

和

App.SearchResultsController

，因为它们从未被余烬使用过

下面是一个jsbin，显示：

另外值得注意的是，

model

和

afterModel

是在

路由

上调用的回调，而不是

控制器

最后，您将看到，由于跨域限制，搜索实际上无法在“继续使用视图”jsbin中工作。您将看到以下错误：

XMLHttpRequest无法加载http://solr.sparklingideas.co.uk/solr/concept/select?q=title:Familys&wt=json&indent=true. 起源http://run.jsbin.com 访问控制允许源站不允许。若要修复此问题，您需要从“solr.sparlingideas.co.uk”为您的应用程序提供服务，或者需要让您的solr服务器发送适当的CORS头

幸运的是，Solr可以通过向URL添加
&json.wrf=？
来发送不受跨域限制的jsonp。jQuery自动为您处理jsonp响应。“不使用视图”jsbin包含jsonp修复程序和其他一些随机位，我必须对它们进行调整以使其正常工作。（）

search: function(search) {
  var results = App.TextSearch.find(search);
  var _this = this;
  // results is a jquery promise, wait for it to resolve
  // Ember can't resolve it automatically
  results.then(function(results){
    _this.get('controllers.searchResults').set('model', results);
  });
  return false;
}

<script type="text/x-handlebars" data-template-name="searchResults" >
  Total : {{model.total}}
  <ul>
    {{#each model.concepts}}
      <li>{{title}}</li>
    {{else}}
      Sorry, nobody is here. 
    {{/each}}
  </ul>
</script>

    App.SearchResultsController  = Ember.Controller.extend({
      // This controller could be removed.
      // Ember will auto generate one for you.
    });

Assertion failed: <App.TextSearchController:ember242> needs controller:searchResults but it does not exist 

    actions:{
      search: function(search) {
        var results = App.TextSearchController.find(search);
        var _this = this;
        // results is a jquery promise, wait for it to resolve
        // Ember can't resolve it automatically
        results.then(function(results){
          _this.get('controllers.searchResults').set('model', results);
        });
        return false;
      }
    }