Question

我有一个我在Ember中创建的自定义视图。我真的很喜欢{{yield}}助手让我控制三明治的“面包”。然而，我现在要做的是创建一个“双层”三明治，并且其中有一个超过1个产量的视图，或者至少能够参数化第二个产量中使用的模板。

所以例如：

layout.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中的观点是集中和兼顾的能力。扩展视图，使我能够在一个地方保留所有视图中共同的东西......

Answer 1

从 Ember 3.25 开始，您可以使用所谓的“命名块”（请参阅 https://api.emberjs.com/ember/release/modules/@glimmer%2Fcomponent 的传递多个块小节）。

示例组件：

def parse_isoduration(s):
""" Parse a str ISO-8601 Duration: https://en.wikipedia.org/wiki/ISO_8601#Durations
Originally copied from:
https://stackoverflow.com/questions/36976138/is-there-an-easy-way-to-convert-iso-8601-duration-to-timedelta
:param s:
:return:
"""

# ToDo [40]: Can't handle legal ISO3106 ""PT1M""

def get_isosplit(s, split):
    if split in s:
        n, s = s.split(split, 1)
    else:
        n = '0'
    return n.replace(',', '.'), s  # to handle like "P0,5Y"

s = s.split('P', 1)[-1]  # Remove prefix
s_yr, s = get_isosplit(s, 'Y')  # Step through letter dividers
s_mo, s = get_isosplit(s, 'M')
s_dy, s = get_isosplit(s, 'D')
_, s = get_isosplit(s, 'T')
s_hr, s = get_isosplit(s, 'H')
s_mi, s = get_isosplit(s, 'M')
s_sc, s = get_isosplit(s, 'S')
n_yr = float(s_yr) * 365  # These are approximations that I can live with
n_mo = float(s_mo) * 30.4  # But they are not correct!
dt = datetime.timedelta(days=n_yr+n_mo+float(s_dy), hours=float(s_hr), minutes=float(s_mi), seconds=float(s_sc))
return dt  # int(dt.total_seconds())  # original code wanted to return as seconds, we don't.

然后像这样使用它：

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

Answer 2

我认为你应该为这个

使用命名出口

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

Answer 3

这样的事情应该有效：

layout.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')

EmberJS多产量助手

layout.hbs

app.js

3 个答案:

layout.hbs

app.js