Question

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

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

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

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

如果有人能告诉我完整的代码以获得下面显示的结果，我真的很赞。

非常感谢！

正如您已经看到的那样，您可以通过将其封装在Handlebars表达式或一系列大括号中来打印属性的值，如下所示：


我的新车是{{color}}。


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


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>

修改

的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}}时，它会查找视图的上下文，默认情况下是它的控制器。应在控制器中定义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 不起作用，因为color是不属于CarView类的CarView实例的属性

4 与3相同

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

嘿，我认为这都是

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

1 个答案: