javascript - 我对 Ember.View 的解释感到困惑

Question

当我在 emberjs.com 上阅读下面的解释时，我感到很困惑。

我输入了与下面的代码相同的代码，但它没有给出与解释所示相同的结果。

我认为下面的解释在某种程度上被省略了，让我产生了误解和困惑。

我想知道完整的代码以获得与下面所示相同的结果，以充分理解解释的含义。

如果有人可以向我展示完整的代码以获得如下所示的结果，我真的很感激。

非常感谢!

As you've already seen, you can print the value of a property by enclosing it in a Handlebars expression, or a series of braces, like this:

My new car is {{color}}.

这将查找并打印 View 的颜色属性。例如，如果您的 View 如下所示:

App.CarView = Ember.View.extend({ color: 'blue' });

您的 View 将显示在浏览器中，如下所示:

My new car is blue.

您还可以指定全局路径:

My new car is {{App.carController.color}}.

顺便说一下，这是我尝试过的代码，它并没有得到与上面的解释中显示的相同的结果。

/*----------
app.js
----------*/

var App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

App.CarView = Ember.View.extend({
    color: 'blue',
    templateName: 'car'
});

App.CarController = Ember.Controller.extend();


App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/'
        })
    })
})

App.initialize();


/*----------
index.html
----------*/

<script type="text/x-handlebars" data-template-name="application">
    <h1>Hello from Ember.js</h1>
</script>

<script type="text/x-handlebars" data-template-name="car">
    My new car is {{color}}.<br />
    My new car is {{App.carController.color}}.
</script>

编辑:

index.html

<script type="text/x-handlebars" data-template-name="application">

<!-- This Works -->  
{{#view App.CarView}}
    (1)My new car is {{view.color}}.<br />
{{/view}}

<!-- These don't Work -->
(2)My new car is {{view.color}}.<br />
(3)My new car is {{App.CarView.color}}.<br />

(4)My new car is {{App.CarController.color}}.<br />
(5)My new car is {{App.carController.color}}.<br />

<!-- this outlet-area shows what I have in my "car" template -->
{{outlet}}

</script>


<script type="text/x-handlebars" data-template-name="car">

<!-- This color property is defined in App.CarView.-->
(6)My new car is {{view.color}}.<br />

<!-- This color property is defined in App.CarCotroller.-->
(7)My new car is {{color}}.<br />

<!-- These don't work-->
(8)My new car is {{App.CarCotroller.color}}.<br />
(9)My new car is {{App.carCotroller.color}}.<br />

</script>

app.js

var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend();
App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});


App.CarController = Ember.ObjectController.extend({ 
    color:'blue'
});

App.CarView = Ember.View.extend({   
    color:"blue",
    templateName: 'car'
});


App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets:function(router){
                router.get('applicationController').connectOutlet('car');
            }     
        })
    })
})

App.initialize();

Answer 1

呃，文档中似乎有错误。我会看看，谢谢你指出:)

通常，当在 CarView 模板中使用 {{color}} 时，它会查找 View 的上下文，默认情况下是其 Controller 。应在 Controller 中定义颜色属性。

如果您想定义并引用 View 中的属性，则必须在模板中使用 view 关键字。在您的示例中， {{view.color}} 应该可以工作。

编辑:关于文档，有大量的 WIP 请参阅:https://github.com/emberjs/website/tree/doc-refactor 。特别是您的用例不再在这里:https://github.com/emberjs/website/blob/doc-refactor/source/guides/templates/handlebars-basics.md

更新:我认为这里的所有问题都包含在这个很棒的说明中:http://trek.github.com/ .

我认为理解您的观点应该足够了，但我可以做出可能对您有帮助的简短回答。

1 之所以有效，是因为您在此处使用 {{view}} 帮助器显式创建了 CarView，因此使用 view.color 是有效的。

2 不起作用，因为您位于 ApplicationView 的范围内，而 ApplicationView 没有颜色属性

3 不起作用，因为颜色是 CarView 实例的属性，而不是 CarView 类的属性

4 与 3 相同

5 Ember.js 为您实例化 Controller ，但它们不是应用程序的属性，而是应用程序路由器的属性。所以 {{App.router.carController.color}} 可以工作(但不要使用它，非常糟糕的做法)

6 之所以有效，是因为您位于 CarView 的模板中，并且在 CarView 类中定义了颜色属性(然后可以在当前 CarView 实例中访问)

7 有效，因为它引用了 CarController 类中定义的颜色属性。正如我所说，Ember.js 在应用程序初始化时实例化 Controller 。稍后在代码中，当调用 router.get('applicationController').connectOutlet('car'); 时，Ember.js 将创建 CarView 类的实例，将其连接到 router.carController 实例，并将其显示在ApplicationView模板的{{outlet}}中(因为您正在applicationController上调用connectOutlet()。因此，CarView模板的渲染上下文是carController，所以当使用{{aProperty}}时，它意味着 controller.aProperty，在你的例子中 carController.color，它是“蓝色”

8 与 3 相同

9 与 5 相同

对于你的最后一个问题，正如我所说，你永远不能从模板静态访问 carController 实例:)

呵呵，我想就这些了