emberjs arraycontroller issue

Question

I am new to Ember and am having an issue. I would like the user to be able to select a number of workstations, and when they hit the next button, I would like the controller to create a number of objects equal to the number the user selected. Once they are taken to the next screen I want to view to append a number of divs with the questions equal to the number the user selected.

I have this for the app.js:

//Initialize the application
App = Ember.Application.create({
    rootElement: '#main'
});
//Initialize the data model

App.CustomerController = Ember.Object.extend({
    first: null,
    last: null,
    email: null,
    phone: null,
    clinic: null,
    number: null
});

App.Workstation = Ember.Object.extend({
    id: null,
    title: null,
    newOrExisting: null,
    cabling: null
});

App.workstationController = Ember.ArrayController.create({
    content: [],
    num: null,
    init: function() {
        this.set('content',[]);
        var num = this.get('num');
        var tempId = Date.now();
        var ws = App.Workstation.create({
            id: tempId
        });
        this.pushObject(ws);
    }


});


App.selectNoComputers = ["1", "2", "3", "4", "5"];
App.workstationSelect = ["Counter 1", "Counter 2", "Counter 3", "Counter 4", "Office 1", "Office 2", "Office 3"];
App.yesNo = ["New", "Existing"];


App.Router.map(function(match) {
  match("/").to("captcha");
  match("/customer").to("customer");
  match("/wsnum").to("computers");
  match("/overview").to("overview");
});


App.CaptchaRoute = Ember.Route.extend({
    renderTemplate: function() {
    this.render('captcha');
  }
});

App.CustomerRoute = Ember.Route.extend();
App.ComputersRoute = Ember.Route.extend();
App.OverviewRoute = Ember.Route.extend({

});

App.initialize();

And this for my html:

<script type="text/x-handlebars" data-template-name="overview">
<div class="navbar">
    <div class="navbar-inner">
        <div class="progress-bar-label-div">
            Progress: 
        </div>
        <div class="progress-bar-div">
            <div class="progress progress-striped">
                <div class="bar" style="width:60%;"></div>
            </div>
        </div>
        <div class="btn-group pull-right">
            {{#linkTo "computers" class="btn"}}
                Prev
            {{/linkTo}}

        </div>
    </div>
</div>
<div class="row-a top">
    <div class="pull-left" >
        <h3>Workstation Overview</h3>
    </div>
    <div class="pull-right">

    </div>
</div>
{{#each App.workstationController}}
    <div class="workstation-b">
        <div class="row-b">
            <div class="pull-left workstation-title" >
                <h4>{{id}}</h4>
            </div>
            <div class="pull-right form-inputs input-text">
                <a class="btn btn-primary" >
                    Start
                </a>
            </div>
        </div>
        <div class="row-b">
            <div class="pull-left questions">
                What station will this be?
            </div>
            <div class="pull-right form-inputs input-text">
                {{view Ember.Select prompt="Please Select" contentBinding="App.workstationSelect"}}
            </div>
        </div>
        <div class="row-b">    
            <div class="pull-left questions">
                Is this computer a new purchase or replacing and existing workstation?
            </div>
            <div class="pull-right form-inputs input-text">
                {{view Ember.Select prompt="Please Select" contentBinding="App.yesNo"}}
            </div>
        </div>
    </div>
{{/each}}
</script>

I'm sure I'm missing something pretty easy, but any help is appreciated.

I put together a fiddle to illustrate my problem.

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-01-21T05:05:30

Working fiddle: http://jsfiddle.net/mgrassotti/xtNXw/3/

Relevant changes: Added an observer to listen for changes to the num property. When it changes, the content array is reset and then an appropriate number of blank workstation objects are created.

App.workstationController = Ember.ArrayController.create({
    content: [],
    num: null,
    init: function() {
        this.set('content',[]);
    },
    addBlankWorkstation: function() {
      var tempId = Date.now();
      var ws = App.Workstation.create({
        id: tempId
      });
      this.pushObject(ws);
    }
});

App.workstationController.addObserver( 'num', function() {
  var num = this.get('num');
  this.set('content',[]);
  for (var i=0;i<num;i++) { 
    this.addBlankWorkstation();
  }
});

I hesitated to say working fiddle above since there are many things that might be worth refactoring. You'll find most of the complexity could be reduced by following ember naming conventions. Suggest looking at latest guides for more detail.

emberjs arraycontroller issue

1 Answers