8

Ember で作成したカスタム ビューがあります。{{yield}}サンドイッチの「パン」を制御できるヘルパーが本当に気に入っています。ただし、私が今やりたいことは、「ダブルデッカー」サンドイッチを作成し、その中に複数の利回りを持つビューを作成するか、少なくとも 2 番目の利回りで使用するテンプレートをパラメーター化できるようにすることです。

たとえば、次のようになります。

レイアウト.hbs

<div>
    <div class="header">Header Content</div>
    <div class="tab1">
        Tab 1 Controls.
        <input type="text" id="common1" />
        {{yield}}
    </div>
    <div class="tab2">
        Tab 2 Controls.
        <input type="text" id="common2" />
        {{yield second-template}} or {{template second-template}}
    </div>
</div>

app.js

App.MyDoubleDeckerView = Ember.View.extend({
    layoutName:"layout',
    templateName:"defaultTemplate", 
    "second-template":"defaultSecond"
});

App.MyExtendedDoubleDecker = App.MyDoubleDeckerView({
    templateName:"myTemplate", 
    "second-template":"mySecondTemplate"
});

このようなことをする方法はありますか？私が ember のビューで気に入っているのは、ビューを一元化および拡張できることです。これにより、すべてのビューに共通するものを 1 か所に保持できます...

4

3 に答える 3

1

Ember 3.25 以降、いわゆる「名前付きブロック」を使用できます ( https://api.emberjs.com/ember/release/modules/@glimmer%2Fcomponentの複数ブロックの受け渡しサブセクションを参照)。

コンポーネントの例:

<h1>{{yield to="title"}}</h1>
{{yield}}

そして、次のように使用します。

<PersonProfile @person={{this.currentUser}}>
  <:title>{{this.currentUser.name}}</:title>
  <:default>{{this.currentUser.siganture}}</:default>
</PersonProfile>
于 2021-03-16T07:42:26.807 に答える
0

これには名前付きアウトレットを使用する必要があると思います

http://emberjs.com/guides/routing/rendering-a-template/

于 2014-05-04T04:31:43.680 に答える
0

このようなものが動作するはずです:

レイアウト.hbs

<div>
    <div class="header">Header Content</div>
    <div class="tab1">
        Tab 1 Controls.
        <input type="text" id="common1" />
        {{yield}}
    </div>
    <div class="tab2">
        Tab 2 Controls.
        <input type="text" id="common2" />
        {{view "view.secondView"}}
    </div>
</div>

app.js

App.MyDoubleDeckerView = Ember.View.extend({
    layoutName:"layout',
    templateName:"defaultTemplate", 
    secondView: Ember.view.extend({
        templateName: "defaultSecond"
    })
});

App.MyExtendedDoubleDecker = App.MyDoubleDeckerView({
    templateName:"myTemplate", 
    secondView: Ember.view.extend({
        templateName: "mySecondTemplate"
    });
});

つまり、view.secondViewテンプレート内から によって指定されたビューを呼び出します。次に、secondViewクラスまたはサブクラスでプロパティを設定します。

構文糖衣を少し追加できます

App.viewForTemplateName = function(templateName) {
    return Ember.View.extend({
        templateName: templateName
    });
};

次に、上記のビュー定義で、

secondView: App.viewForTemplateName('mySecondTemplate')
于 2014-05-04T04:48:30.723 に答える