1

モデル内のプロパティの現在の値に基づいて別のハンドルバーテンプレートをレンダリングしようとしていますが、かなりの数のオプションがある可能性があります（したがって、多くの{{#if}}sを使用したくない）。私が考えることができる最もよいことはこれです：

Ember.Handlebars.registerBoundHelper('selectorType', function(name, options) {
  return Ember.Handlebars.compile("{{template _selectors_" + name + "}}")(options.contexts[0], options);
});

そして、私はそれを私のテンプレートで次のように使用します：

{{selectorType selector.name}}

（百{{#if}}秒のようにではなく）

問題は、レンダリング中に次のエラーが発生することです。 「レンダリングプロセス以外ではappendChildを使用できません」

明らかに私は何か間違ったことをしている。これを行う正しい方法は何ですか？

4

2 に答える 2

0

動的なchildViewsを備えたContainerViewを使用してこれを解決することになりました。方法については、 Ember.jsの動的な子ビューを参照してください。

関連するコードは（coffeescript）です：

App.SelectorType = Ember.Object.extend
  name: null
  type: null
  typeView: null
  options: null

App.SelectorTypes = [
  App.SelectorType.create(
    name: 'foo'
    type: 'bar'
  ) #, more etc
]

App.SelectorTypes.forEach (t) ->
  t.set 'typeView', Ember.View.create
    templateName: "selectors/_#{t.get('viewType')}_view"
    name: t.get('name')

App.SelectorDetailView = Ember.ContainerView.extend
  didInsertElement: ->
    @updateForm()

  updateForm: (->
    type = @get('type')
    typeObject = App.SelectorTypes.findProperty('type', type)
    return if Ember.isNone(type)

    view = typeObject.get('typeView')
    @get('childViews').forEach (v) -> v.remove()
    @get('childViews').clear()
    @get('childViews').pushObject(view)
  ).observes('type')

そしてテンプレート：

  Selector Type:
  {{view Ember.Select
        viewName=select
        contentBinding="App.SelectorTypes"
        optionValuePath="content.type"
        optionLabelPath="content.name"
        prompt="Pick a Selector"
        valueBinding="selector.type"
  }}
<dl>
  <dt><label>Details</label></dt>
  <dd>
    {{view App.SelectorDetailView typeBinding="selector.type"}}
  </dd>
</dl>

しかし、難しすぎるようですが、より良い解決策を見たいと思っています！

于 2013-02-10T21:52:50.217 に答える
0

これを行うためにヘルパーを作成する必要はないと思います。ビュー内から、を変更し、変更したらメソッドtemplateNameを呼び出すことで、これを行うことができます。rerendertemplateName

init: function() {
    this.set('templateName', 'firstOne');
    this._super();
},

click: function() {
    this.set('templateName', 'secondOne');
    this.rerender();
}

テンプレートがレンダリングされる前にinit空を設定する方法を使用できます。templateName次に、メソッドを呼び出して_super、DOMへのビューの挿入を完了します。次に、クリックイベントでビューの変更をトリガーできます。変数を更新してから、この特定のビューを再レンダリングするためtemplateNameに呼び出します。rerender()

例としてJSFiddleを設定しました：http：//jsfiddle.net/pFkaE/「FirstOne 」をクリックしてみてください。ビューをに変更しますsecondOne。

于 2013-02-07T16:23:12.943 に答える