Question

我有一个模板

<div class="vehicle">
    <div class="model">{{model}}</div>
    <div class="price">{{price}}</div>
</div>

对于某些上下文子部分来说很常见（我无法更改上下文），我们将这些子部分称为car和bike，而上下文中只有其中之一：

contractContext = {
    car?,
    bike?,
    ...
}

无论存在哪个子部分，我都需要使此模板正常工作。我可以去

{{#if car}}
<div class="vehicle">
    <div class="model">{{car.model}}</div>
    <div class="price">{{car.price}}</div>
</div>
{{else}}
<div class="vehicle">
    <div class="model">{{bike.model}}</div>
    <div class="price">{{bike.price}}</div>
</div>
{{/if}}

但是我的现实生活中的模板要大得多，因此不要复制那些我想有条件地使用上下文的模板。我尝试过：

{{#with car ? car : bike}}
<div class="vehicle">
    <div class="model">{{this.model}}</div>
    <div class="price">{{this.price}}</div>
</div>
{{/with}}

（还有{{#with car || bike}}，这对于实际情况来说还不够，因为检查更加复杂），但是with不能以这种方式工作（sandbox）。有什么方法可以有条件地设置上下文，还是我必须用JS处理呢？

Answer 1

您要尝试的是在模板中实现一些逻辑（车辆选择）。但是，把手和胡须是logicless templates，这就是为什么在模板中这样做不是很明显的事情。我相信做您想要的事情的正确方法是在javascript中处理它（所有逻辑都应该在其中）。喜欢：

const data = {
  vehicle: car || bike
}

和模板

<div class="vehicle">
  <div class="model">{{vehicle.model}}</div>
  <div class="price">{{vehicle.price}}</div>
</div>

此外，还有一种使用customHelper的技巧。只是为了展示如何炫酷和可定制的把手：

模板：

{{#choseContext car bike}}
  <div>{{price}}</div>
  <div>{{model}}</div>
{{/choseContext}}

上下文：

{
  bike: {
    price: 422,
    model: 'foo'
  }
}

助手：

Handlebars.registerHelper('choseContext', function(v1, v2, options) {
  let context = v1 || v2;
  return options.fn(context);
});

是否可以在Handlebars.js中提供条件上下文？

1 个答案: