Handlebars使用if / else将Context切换到上下文的属性

时间:2022-07-19 21:06:14

Just wonderdering what the best way to handle the following situation is.

只是想知道处理以下情况的最佳方法是什么。

Using : Ember 1.7.0, Handlebars 1.3.0

使用:Ember 1.7.0,Handlebars 1.3.0

Context:

语境:

var context = {
    isPerson : true,

    person : {
        name : 'joe'
    },
    animal : {
        name : 'henry'
    }
};

HBS:

HBS:

{{#if isPerson}}
    {{#with person}}
{{else}}
    {{#with animal}}
{{/if}}

{{name}}

{{/with}}

The context is a dummy context, the real context is quite a large data set with many properties. What I am trying to achieve is to reduce the amount of handlebars needed to implement this. I know that I can simply just do the following...

上下文是虚拟上下文,真实上下文是具有许多属性的相当大的数据集。我想要实现的是减少实现这一目标所需的把手数量。我知道我可以简单地做以下事情......

{{#if isPerson}}
    {{#with person}}
        {{name}}
    {{/with}}
{{else}}
    {{#with animal}}
        {{name}}
    {{/with}}
{{/if}}

The problem here is that I will be rendering around 100 fields. Both the "person" and "animal" objects have identical keys, In this case it would be best to reduce the handlebars needed in favor of switching the context to one of the inner keys.

这里的问题是我将渲染大约100个字段。 “人”和“动物”对象都具有相同的键。在这种情况下,最好减少有利于将上下文切换到内键之一所需的把手。

1 个解决方案

#1


1  

In my opinion, the best way to do this is with a computed property that resolves to either the person or animal object. Let's call it creature for the sake of the example.

在我看来,最好的方法是使用一个计算属性,该属性可以解析为人或动物对象。为了这个例子,我们称它为生物。

creature: function() {
    if (this.get('context.isPerson')) {
        return this.get('context.person');
    } else {
        return this.get('context.animal');
    }
}.property('context.isPerson')

Then in your template, just use the creature property:

然后在您的模板中,只需使用creature属性:

{{#with creature}}
    {{name}}
{{/with}}

#1


1  

In my opinion, the best way to do this is with a computed property that resolves to either the person or animal object. Let's call it creature for the sake of the example.

在我看来,最好的方法是使用一个计算属性,该属性可以解析为人或动物对象。为了这个例子,我们称它为生物。

creature: function() {
    if (this.get('context.isPerson')) {
        return this.get('context.person');
    } else {
        return this.get('context.animal');
    }
}.property('context.isPerson')

Then in your template, just use the creature property:

然后在您的模板中,只需使用creature属性:

{{#with creature}}
    {{name}}
{{/with}}