emberjs arraycontroller问题

Question

我是Ember的新手，遇到问题。我希望用户能够选择多个工作站，并且当他们点击下一个按钮时，我希望控制器创建与用户选择的数量相等的许多对象。一旦他们被带到下一个屏幕，我想查看附加的问题等于用户选择的数量问题的数量。

我有这样的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(); 

这对我的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 put together a fiddle to illustrate my problem.

Answer 1

工作小提琴：http://jsfiddle.net/mgrassotti/xtNXw/3/

相关的变化：添加了一个观察者监听更改num财产。当它更改时，内容数组将被重置，然后创建适当数量的空白工作站对象。

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(); 
    } 
}); 

我犹豫了一下说working fiddle以上，因为有许多事情可能是值得重构。你会发现大多数复杂性可以通过遵循烬名命名约定来减少。建议查看最新指南了解更多详情。