emberjs arraycontroller 문제

Question

Ember를 처음 사용하는데 문제가 있습니다. 사용자가 여러 대의 워크 스테이션을 선택할 수있게하고 싶습니다. 다음 버튼을 누르면 컨트롤러에서 사용자가 선택한 번호와 동일한 수의 오브젝트를 생성하고 싶습니다. 일단 다음 화면으로 넘어 가면 사용자가 선택한 숫자와 같은 숫자의 div가 추가됩니다.

//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을 위해 :

나는 app.js이이

<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 말을 망설. 에버 명명 규칙을 따르면 복잡성의 대부분을 줄일 수 있습니다. 자세한 내용은 최신 가이드를 참조하십시오.