10

我在模板中有一种情况，我想在每个块内对父上下文中的值使用 if 块。

编码：

App = Ember.Application.create({});

App.view = Ember.View.extend({
    foo: [1, 2, 3],
    bar: true
});

模板：

<script type="text/x-handlebars">
{{#view App.view}}
    {{#each foo}}
        {{#if bar}}
            {{this}}
        {{/if}}
    {{/each}}
{{/view}}
</script>

这不起作用，因为在 each 循环内引用的名称的范围仅限于迭代元素。您如何在父上下文中引用事物？

演示：http: //jsfiddle.net/hekevintran/sMeyC/1/

4

4 回答 4

11

我找到了更好的解决方案。

从 Ember.js 视图层指南（http://emberjs.com/guides/understanding-ember/the-view-layer/）：

Ember 中的车把助手也可以指定变量。例如，{{#with controller.person as tom}} 形式指定后代范围可以访问的 tom 变量。即使子上下文具有 tom 属性，tom 变量也会取代它。

这种形式有一个主要好处：它允许您缩短长路径而不会失去对父范围的访问。

这在 {{#each}} 助手中尤为重要，它提供了一个 {{#each person in people}} 表单。在这种形式中，后代上下文可以访问 person 变量，但仍与模板调用 each 的范围相同。

模板：

<script type="text/x-handlebars" >
    {{#view App.view}}
        {{#each number in view.foo}}
            {{#if view.bar}}
                {{number}}
            {{/if}}
        {{/each}}
    {{/view}}
</script>​

演示：http: //jsfiddle.net/hekevintran/hpcJv/1/

于 2012-05-23T01:53:48.807 回答
5

hekevintran 的回答意味着您可以使用#with. 我们在 JavaScript 中也有类似的问题this。在 JavaScript 中，有时您会看到这样的代码来解决它。

var self = this;
doSomething(function() {
  // Here, `this` has changed.
  if (self.bar) {
    console.log(this);
  }
});

在 Ember 风味的车把中，类似的事情正在发生view。假设您有 App.MyOuterView 和其中的另一个视图。你可以像这样解决它。

{{#with view as myOuterView}}
  {{#each foo}}
    {{#if myOuterView.bar}}
      {{this}}
    {{/if}}
  {{/each}}
{{/with}}

与 JavaScript 类似，您基本上可以重命名view为其他名称，这样它就不会被内部视图遮蔽。 {{#each person in people}}只是其中的一个特例。但是重命名 using{{#with view as myView}}是解决此问题的更通用的解决方案/解决方法，它也适用于对view帮助程序的嵌套调用。

于 2013-07-20T01:25:45.887 回答
2

我也被这件事难住了。该线程和其他线程（在 ember.js 中使用容器视图 - 如何从子视图访问父变量）帮助我解决了问题。我使用乔纳森的建议做 {#with} 并且还发现我应该通过调用控制器来访问我的变量。我的工作是这样的：

// I use the #which command to preserve access to the outer context once inside the #each
{{#with view as myOuterView}}
  {{#each myInnerArray}}
    //here, i get my 'name' property from the *controller* of myOuterView
    {{myOuterView.controller.name}}
    // stuff i did in inner array
  {{/each}
{{/with}
于 2014-02-14T22:11:23.017 回答
0

无需将if内部each放在首位：

<script type="text/x-handlebars">
  {{#view App.view}}
    {{#if view.bar}}
      {{#each view.foo}}
        {{this}}
      {{/each}}
    {{/if}}
  {{/view}}
</script>

演示：http: //jsfiddle.net/ppanagi/NQKvy/35/

于 2013-07-20T17:15:13.393 回答