Ember.js:Handlebars 不显示任何内容

本文介绍了Ember.js:Handlebars 不显示任何内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

/app.js
var Welcome = Ember.Application.create({});

Welcome.person = Ember.View.extend({
    personName: 'Andrew'
});

这里是 index.html 的内容，部分视图:

Here is the content of the index.html, part of the view:

/index.html
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script type="text/x-handlebars">
  {{personName}}
</script>

<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

我的问题是为什么它不显示任何内容?它不应该呈现 personName 的内容吗?

My question is why isn't it displaying anything? Shouldn't it render the content of personName?

更新:

我使用的是 Ember 的入门套件.它已经定义了一个视图.我刚刚向对象添加了一个属性，但它仍然对视图不可见.

I am using the Starter Kit from Ember. It already has a view defined. I just added one more property to the object but still it is not visible to the view.

App.MyView = Em.View.extend({
  mouseDown: function() {
    window.alert("hello world!");
  },
  name: 'Andrew'
});

.html 中的视图部分是:

And the view part in .html is:

<script type="text/x-handlebars">
    {{#view App.MyView}}
      <h1>Hello world {{name}}!</h1>
    {{/view}}
  </script>

既然活动有效，名字不是应该可以访问的吗?

Since the event works, isn't the name supposed to be accessible?

推荐答案

从 1.0 开始，视图保留其上下文.

Since 1.0, the views preserve their context.

VIEW CONTEXT CHANGES

In apps built on earlier version of Ember (before 1.0), the {{#view}} helper
created a new context for the view. This meant that you had to explicitly set the
context on them.

In 1.0, we've  made this a bit simpler. The {{#view}} helper no longer changes
the context, instead  maintaining the parent context by default. Alternatively,
we will use the controller  property if provided. You may also choose to directly
overridethe context property. The order is as follows:

Specified controller
Supplied context (usually by Handlebars)
parentView's context (for a child of a ContainerView)
In the event that you do need to directly refer to a property on the view, you
can use the view keyword, i.e. {{view.myProp}}.


So, for your example, tou have to use {{view.name}}

<script type="text/x-handlebars">
  {{#view App.MyView}}
    <h1>Hello world {{view.name}}!</h1>
  {{/view}}
</script>

这篇关于Ember.js:Handlebars 不显示任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！