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

标签 ember.js

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

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

这是 index.html 的内容,部分 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 的内容吗?

更新:

我正在使用 Ember 的初学者工具包。它已经定义了一个 View 。我刚刚向对象添加了一个属性,但它仍然对 View 不可见。

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

.html 中的 View 部分是:

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

既然事件成功了,这个名字难道不应该是可以访问的吗?

最佳答案

从 1.0 开始, View 保留了它们的上下文。

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 不显示任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11818116/

相关文章:

ember.js - @import 无法在 ember-cli-sass 插件中工作

asp.net - 带有 asp.net mvc 和 web api 的前端 javascript 框架

ember.js - 在 EmberJS 上动态渲染 View

linux - 错误 : EACCES when creating new Ember project

javascript - Ember onClick 事件未完成操作

javascript - Ember Octane 和 JQuery

javascript - Ember 组件测试——当组件不调用外部 Action 时如何对它的 Action 进行单元测试?

ember.js - 使用带有 Ember Data 2.0 的 Fixture Adapter 在模型上进行 Store.findAll

javascript - 如何在 Ember.js 中循环排序数组 Controller ?

css - 如果我在路由中使用媒体 : Ember. inject.service() ,则 template.hbs 中的 ember 响应式 {{media}} 是未定义的。为什么?