2

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

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

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

我想知道完整的代码以获得下面显示的相同结果,以完全理解解释的含义。

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

非常感谢你!

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

我的新车是{{color}}。

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

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

您的视图将像这样出现在浏览器中:

我的新车是蓝色的。

您还可以指定全局路径:

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

编辑:

索引.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>

应用程序.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');
            }     
        })
    })
})

应用程序.initialize();

4

1 回答 1

2

呵呵,文档中好像有错误。我会看的,谢谢指点:)

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

如果要从视图中定义和引用属性,则必须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 为你实例化了控制器,但它们不是 App 的属性,而是应用程序路由器的属性。所以 {{App.router.carController.color}} 可以工作(但不要使用它,非常糟糕的做法)

6有效,因为您在 CarView 的模板中,并且在 CarView 类中定义了一个颜色属性(然后可以在当前的 CarView 实例中访问)

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

8同 3

9同 5

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

呵呵,我觉得就这些

于 2012-12-27T10:10:10.777 回答