2

Ember.Router 構造を使用する Ember.js アプリがあります。

私のアプリの構造は次のようになります

window.App = Ember.Application.create {
    #Truncated idea of app, not including application controller or any of that
    MainController = Ember.Controller.extend()
    MainView = Ember.View.extend
        templateName: 'main-template'

したがって、コントローラーとビューは拡張され、アプリケーションの作成時に作成されません。その後、アウトレットを結ぶルートがあります

Router: Ember.Router.extend
    root: Ember.Route.extend
        main: Ember.Route.extned
            route: '/'
            connectOutlets: (router, event) ->
                router.get('applicationController').connectOutlet('main')

<select>タグを一連の値にバインドする必要があります。Ember.Selectこれを行うには良い方法のように見えるので、選択用のコントローラーとビュー拡張機能を追加します

MySelectController: Ember.ArrayController.extend
    contents: [{id:1,title:'test'},{id:2,title:'test2'}]
MySelectView: Ember.Select.extend
    contentBinding: this.get('controller')
    contentValuePath: 'id'
    contentLabelPath: 'title'

これはうまくいきません。this.get('controller')でビュー内に含めようとすると、エラーが発生します{{#view App.MySelectView}}

どうすればこれを正しく行うことができますか?

4

1 に答える 1

6

これを実装する方法の例を次に示します。

ハンドルバー テンプレート:

<script type="text/x-handlebars" data-template-name="application">
  <header>
    <h1>Ember Router Sample</h1>
  </header>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="myForm">
  {{view view.mySelectView 
    selectionBinding="controller.selected" 
    contentBinding="view.controller.content.persons"
  }}
  {{view Ember.TextField valueBinding="controller.selected.name"}}
</script>

JavaScript:

App = Ember.Application.create();

App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
  templateName: 'application'
});

App.MySelectController = Em.ArrayController.extend();

App.MyFormController = Em.Controller.extend({
  selected: null,
});

App.MyFormView = Ember.View.extend({
  templateName: 'myForm',
  mySelectView: Em.Select.extend({
    optionLabelPath: 'content.name',
    optionValuePath: 'content.id'
  })
});

App.Router = Em.Router.extend({

  root: Em.Route.extend({

    index: Em.Route.extend({
      route: '/',
      connectOutlets: function(router, context) {
        router.get('applicationController').connectOutlet({
          name: 'myForm',
          context: Ember.Object.create({
              persons: [{id:0, name: "Wayne"}, {id: 1, name: "Gart"}]
          })
        });
      }
    })
  })
});
App.initialize();

</p>

于 2012-07-25T23:05:20.367 に答える