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 范围内

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，它是 'blue'

8 与 3 相同

9 与 5 相同

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

呵呵，我想就这些吧