Ember Data Mockjax

by alexspeller

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.2/jquery.mockjax.js"></script>
<script src="http://ember.alexspeller.com/handlebars-1.0.0.js"></script>
<script src="http://ember.alexspeller.com/ember-latest.js"></script>
<script src="http://ember.alexspeller.com/ember-data-latest.js"></script>
<script type="text/x-handlebars">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <h2>Teams</h2>
    <p><b>Instructions:</b> Click the checkboxes - both sets of properties below should update, however only the <code>length</code> property updates correctly.
    <ul>
        {{#each controllers.teams}}
        
            <li>
                {{input type="checkbox" checked=isSelected}}
                Team: {{name}} (selected: {{isSelected}})
            </li>
        {{/each}}
         
    </ul>
    <h2>Project Teams</h2>
    <ul>
        {{#each}}
            <li>
                <p>{{name}}</p>
            <p>selectedTeams.length {{selectedTeams.length}}<br>
                <b>The length property of the filtered array updates correctly</b>
            <p>selectedTeams: {{selectedTeams}}<br>
                <b>However the content of the array is not updated correctly</b>
                </p>
                
                 <p>selectedTeamsAlternate: {{selectedTeamsAlternate}}<br>
                <b>However the content of the array is not updated correctly</b>
                </p>
            </li>
        {{/each}}
         
    </ul>
</script>

CoffeeScript

window.App = Em.Application.create()
App.ApplicationAdapter = DS.ActiveModelAdapter.extend()

App.Team = Em.Object.extend isSelected: true
   
App.Project = Em.Object.extend
  selectedTeams: Em.computed.filterBy('teams', 'isSelected')
  selectedTeamsAlternate: Em.computed.filter '[email protected]', (team) ->
    team.get('isSelected')

teams = "Team1 Team2".w().map (name) ->
  App.Team.create name: name

projects = "Project1 Project2".w().map (name) ->
  App.Project.create name: name, teams: teams

App.IndexRoute = Em.Route.extend
  model: -> projects

  setupController: (controller, context) ->
    @_super controller, context
    @controllerFor("teams").set "content", teams

App.Router.map ->
  @resource "projects"

App.TeamsController = Em.ArrayController.extend()
App.IndexController = Em.ArrayController.extend needs: ["teams"]