0

私は 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>

かなり簡単なものが欠けていると確信していますが、どんな助けでも大歓迎です。

私の問題を説明するためにフィドルをまとめました。

4

1 に答える 1

0

作業フィドル: 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 の命名規則に従うことで、複雑さのほとんどを軽減できることがわかります。詳細については、最新のガイドを参照することをお勧めします。

于 2013-01-21T05:05:30.050 に答える