Javascript I'；我对余烬的解释感到困惑

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

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

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

我想知道完整的代码，以获得如下所示的相同结果，从而完全理解解释的含义

我真的很感激如果有人能给我看完整的代码，以获得如下所示的结果

多谢各位

正如您已经看到的，您可以通过将属性包含在把手表达式或一系列大括号中来打印属性的值，如下所示：

我的新车是彩色的

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

App.CarView=Ember.View.extend({ 颜色：“蓝色” });

您的视图将显示在浏览器中，如下所示：

我的新车是蓝色的

您也可以指定全局路径：

我的新车是{{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>

---

App.initialize（）

嗯，文档中似乎有错误。我会看的，谢谢你指点：）

通常，在CarView模板中使用{{color}}时，它将查找视图的上下文，默认情况下，该上下文是其控制器。颜色属性应在控制器中定义

如果要从视图中定义和引用属性，则必须在模板中使用

视图

关键字。在您的示例中，{view.color}}应该可以工作

编辑：关于文档，有大量在制品请参见：。特别是，您的用例不再在此：

更新：我想这里的所有问题都包含在这个伟大的说明中：

我认为理解你们的观点就足够了，但我可以做一些简短的回答，这可能会对你们有所帮助

1之所以有效，是因为您在这里使用{{view}}助手显式创建了一个CarView，因此使用view.color是有效的

2不起作用，因为您的应用程序在ApplicationView的范围内，而ApplicationView没有颜色属性

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

4与3相同

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

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

7之所以有效，是因为它引用了CarController类中定义的颜色属性。正如我所说，Ember.js在应用程序初始化时实例化控制器。稍后在代码中调用

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实例：）

---

呵呵，我想就这些了

非常感谢您的回复！emberjs.com上的文档让我很困惑。我想澄清一些观点，以了解ember的视图是如何工作的。因此，请允许我问您一些问题。我添加了编辑过的代码。在编辑过的代码中，当我使用{{{#view App.CarView}}。此外，当我在“应用程序模板”中添加“{outlet}”时，我可以访问“view.color”。但是，在我发布的来自emberjs.com的引用文档中，它可以访问{{{view.color}，而无需使用{{view}将其包装或在{outlet}中输出。在我发布的解释出现的地方，他们还没有介绍“{{{{view}}和{{outlet}}然而。所以，我想知道在他们的解释中遗漏了什么代码。我现在正试图通过在emberjs.com上的文档中键入相同的代码来学习ember.js。所以，我想知道完整的代码，以获得它们显示给我的相同结果。你能帮我知道在它们的解释中遗漏了什么代码吗？另外，我也不知道如何获得答案访问{{App.carController.color}}如文档所示。是的，我上周读了这一页，通过在那一页上键入相同的代码，我学到了很多。

<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>

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');
            }     
        })
    })
})