Spyglass: Moving Facets into a Separate Ember App

index.html

<!-- Add this to your index.html file at the top of the body element. -->

<div id="app1">
</div>


<div id="app2" class="sf-module">
</div>

search.hbs

<div class="sr-module">
  {{view SgApp.results}}
</div>

{{!-- We removed the facets from SgApp because they are now controlled by FacetsApp --}}

sidebarApp.hbs

{{outlett}}

sidebarFacets.hbs

{{view SgApp.textFacetGroup fieldName="price" displayName="Price"}}

{{!-- Make sure to change these values to your actual field names --}}

spyglass-app.js

// Define both Ember Applications at the top of spyglass-app.js

var SgApp = window.SgApp = Ember.Application.create({
  rootElement: "#app1"
});

var FacetsApp = window.FacetsApp = Ember.Application.create({
  rootElement: "#app2"
});

FacetsApp.Router.reopen({
  location: 'none'
});

FacetsApp.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('sidebarApp');
  }
});

FacetsApp.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('sidebarFacets');
  }
});


// ...

Spyglass-separate-facets-app.md

At times it might be useful to separate the facets block from the search input and results. Here is how you can do that:

1. We will need to add two container elements to index.html so that we can use them as rootElements for the two applications.
2. Define both of our new apps at the top of spyglass-app.js. The facets app does not need to monitor the url, it just needs to observe the primary spyglass app.
3. Remove the current facets from the search.hbs template
4. Add a new sidebarApp.hbs and sidebarFacets.hbs templates to render the faets app.

---

Spyglass UI for Solr

Note: If possible it is always best to keep the facets views within the primary Spyglass application.