Liquid Fire Using watchModels & illiquidModel

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

controllers.customers.customer.products.js

import Ember from 'ember';

export default Ember.Controller.extend({
  searchTerm: 'x',
  
filteredProducts: Ember.computed('model.products.@each', 'searchTerm', function() {
  return this.get('model.products').filter((song) => {
    let searchTerm = this.get('searchTerm').toLowerCase();
    return song.toLowerCase().indexOf(searchTerm) !== -1;
  });
}),
 
});

fixtures.data.js

export default {
 customers: [
  {
    id: 1,
    details: 'customer1 details',
    products: [
     'customer1 product1',
     'customer1 product2',
     'customer1 product3',
    ]
  },
  {
    id: 2,
    details: 'customer2 details',
    products: [
     'customer2 product1x',
     'customer2 product2x',
     'customer2 product3x',
     'customer2 product4',
     'customer2 product5x',
     'customer2 product6',
     'customer2 product7x',
     'customer2 product8',
     'customer2 product9x',
    ]
  }
 ]
};

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('customers', function() {
    this.route('customer', {path: ':id'}, function() {
      this.route('details'),
      this.route('products')
    });
  });
});

export default Router;

routes.customers.customer.details.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.customers.customer.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.customers.customer.products.js

import Ember from 'ember';

export default Ember.Route.extend({
  
});

routes.customers.js

import Ember from 'ember';
import data from '../fixtures/data';

export default Ember.Route.extend({
  model() {
   return data.customers; 
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  beforeModel() {
    this.transitionTo('customers');
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.customers.customer.details.hbs

Details
{{model.details}}

templates.customers.customer.hbs

{{#liquid-bind model use="fade" enableGrowth=false as |m|}}
  {{#link-to 'customers.customer.details' model}}Details for Customer#{{m.id}}{{/link-to}} | 
  {{#link-to 'customers.customer.products' model}}Products for Customer#{{m.id}}{{/link-to}}
  <hr>
  {{liquid-outlet watchModels=true enableGrowth=false}}
{{/liquid-bind}}

templates.customers.customer.products.hbs

Products
<ul>
  {{#illiquid-model filteredProducts as |m|}}
    {{#each m as |product|}}
      <li>{{product}}</li>
    {{/each}}
  {{/illiquid-model}}
</ul>

templates.customers.hbs

Customer List:
<ul>
{{#each model as |customer|}}
<li>{{#link-to "customers.customer.products" customer}}Customer#{{customer.id}}{{/link-to}}</li>
{{/each}}
</ul>

<hr style="border-top: 2px solid red;">
{{liquid-outlet enableGrowth=false}}

transitions.js

export default function() {
 this.transition(
   this.betweenModels(function(fromModel, toModel) {
 		return fromModel && toModel && fromModel.id !== toModel.id;
   }),
   this.use('fade', { duration: 300 })
 );
}

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.0",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {
    "liquid-fire": "latest",
    "ember-bootstrap": "latest"
  }
}