JSFiddle - React, Tailwind, and code Playground

by tobymarsden

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://builds.emberjs.com/canary/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/canary/ember.debug.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
  <script type="text/x-handlebars">
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="parent">
    <h3>Query param value: {{test}}</h3>
    <button {{action 'update'}}>Click me a few times to change the query param value!</button>
  <p>{{#link-to 'parent.index' 'B' }}Then change the model param{{/link-to}}</p>
  <p>... click the button a few more times...</p>
  <p>{{#link-to 'parent.index' 'A' }}Return to the first model param again{{/link-to}} and see that the query param value is sticky.</p>
  <p>{{#link-to 'parent.index' 'B' }}And back to the second model param again{{/link-to}} to confirm it.</p>
    {{outlet}}
  </script>
  
  
  <script type="text/x-handlebars" data-template-name="parent/index">
  </script>

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
  this.route('parent', {path: '/:parent_param'}, function() {});
});

App.IndexRoute = Ember.Route.extend({
  beforeModel: function() {
    this.transitionTo('parent', 'A');
  }
});

App.ParentController = Ember.Controller.extend({
  queryParams: ['test'],
  test: 1,
  
  actions: {
    update: function() {
 this.incrementProperty('test');
    }
  }
});

App.ParentIndexRoute = Ember.Route.extend({
  model: function(params) {
      return new Ember.RSVP.Promise(function(resolve) {
        setTimeout(function() {
          resolve({name: 'A'});
        }, 500);
      });
  }
});