emberjs arraycontroller问题

Question

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

我有这个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时犹豫不决，因为有许多事情可能值得重构。您会发现遵循ember命名约定可以减少大部分复杂性。建议查看最新指南以获取更多详细信息。