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

Posted

技术标签:

【中文标题】Ember.js:Handlebars 不显示任何内容【英文标题】:Ember.js: Handlebars displays nothing 【发布时间】:2012-08-02 19:46:39 【问题描述】:
/app.js    
var Welcome = Ember.Application.create();

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

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

/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 的入门套件。它已经定义了一个视图。我刚刚向对象添加了一个属性,但视图仍然看不到它。

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

而.html中的视图部分是:

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

既然活动有效,那么名称不应该是可访问的吗?

【问题讨论】:

【参考方案1】:

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

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 不显示任何内容的主要内容,如果未能解决你的问题,请参考以下文章

Ember.js - 使用 Handlebars 助手检测子视图是不是已呈现

使用Ember.js将新行动态地插入到表上下文中

Ember.js 的视图层

如何在 Ember JS 中获取模型数据

使用 Ember.js 按模型类型/对象值选择视图模板

ember.js + 车把:渲染 vs 出口 vs 局部 vs 视图 vs 控制