我正在尝试开发我的第一个应用程序，但无法使浏览器显示我的车把脚本
这是我的html：
<!doctype html>
<html>
<head>
<title>Random Presents</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/handlebars.js"> </script>
<script src="lib/ember.js"></script>
<script src ="js/app.js"></script>
</head>
<body>
<script type="text/x-handlebars">
{{#view App.AView}}{{firstName}}{{/view}}
</script>
<script type="text/x-handlebars">
{{#view App.AView}}{{surname}}{{/view}}
</script>
</body>
</html>
和我的app.js文件：
App = Ember.Application.create();
App.AView = Ember.View.extend({
tagName: 'span',
firstName: 'Joe',
surname: 'Bloggs'
});
当我加载文件时；即使源与我的html文件相对应，页面也为空。
我在chrome javascript控制台中看不到任何错误。
我真的很想念什么吗？
我测试了这些库，它们直接来自网站，并且是最新版本。
更糟糕的是，我什至尝试使用仅包含html的脚本，但他也不会加载。
最佳答案
因为是在View类中创建的属性，所以应使用view属性，在某些情况下，该属性在某种程度上类似于this关键字。
将模板更改为：
<script type="text/x-handlebars">
{{#view App.AView}}
{{view.firstName}}
{{view.surname}}
{{/view}}
</script>
由于使用Ember约定，因此代码中的两个把手模板都代表同一件事。当没有名称时，Ember会将模板名称假定为“应用程序”。这意味着即使您将两个模板上的属性都设置为
{{view.propertyName}}，后一个将覆盖第一个（或所有具有相同名称的前代），因为Ember会将模板（带有把手）编译为模板函数，并且名称将用作模板集合（路径Ember.TEMPLATES）的键，因此这就是将这些表达式移至单个模板的原因，就像上面的代码一样。但是您应该避免使用这样的视图。
视图应显示数据，但不保留数据。您的数据应该存在于模型中（在商店中），并且视图应该向控制器询问数据，并且应该从痛处获取数据。应该通过路由器将存储中的数据填充到控制器中（控制器知道该做什么以及何时执行该操作）。
我并不是说这个很糟糕。因为您是从Ember开始的，所以只是想避免在错误的街道上开车。
众所周知，有很多过时的教程，这有时会引起很多混乱（存在一个repo，其中过时的教程/文章应该接收更新或添加免责声明的通知）。但总的来说，我建议您遵循guides，观看一些videos about Ember，并在互联网上检查other resources available。
这是一个非常基本的sample application的注释代码，仅用于显示您可能并且应该使用的某些功能：
车把
<!--
when a template doesn't have a data-template-name, Ember assumes this is the
application main template. This is usually where you'd render the layout structure
and also where you'd put the main outlet
-->
<script type="text/x-handlebars">
<h1>Example</h1>
{{outlet}}
</script>
<!--
As per convention, a named template should match with its route name
There are ways around using "partial", "render", or even defining
a View class and setting the templateName property to a different name, or
using the route's renderTemplate hook
Another thing. You can have nested views when using nested routes
This view template has another outlet to display a person from the collection
-->
<script type="text/x-handlebars" data-template-name="people">
{{#each person in controller}}
{{#linkTo people.person person}}
{{person.fullName}}
{{/linkTo}}<br />
{{/each}}
<hr />
{{outlet}}
</script>
<!--
Unlike the very first code piece in this answer, when you have a view or
template connected to a controller, you can access the data from the controller
using handlebars expressions.
-->
<script type="text/x-handlebars" data-template-name="people/person">
First name: {{view Ember.TextField valueBinding="firstName"}}<br />
Last name: {{view Ember.TextField valueBinding="lastName"}}<br />
Full Name: {{fullName}}
</script>
JavaScript：
window.App = Ember.Application.create();
// defining routes which are somewhat like states (think of a state machine)
// they also provide the ability to have hash urls
// the router is a very important piece of ember due to conventions
App.Router.map(function() {
// sample url ~/#/people
this.resource('people', function() {
// sample url ~/#/people/1
this.route('person', { path: ':person_id' });
});
});
// In this route we provide the data to the list view in "people" template
// the data will actually go to the controller 'content' property which can
// be a type of array for arraycontroller or a single object for object controller
// this should allow the view to call data from the controller
App.PeopleRoute = Em.Route.extend({
model: function() {
return App.Person.find()
}
});
// in this route we provide data for the "people/person" template
// In this case we are using the person id from the parameters to query our
// application store.
App.PeoplePersonRoute = Em.Route.extend({
model: function(params) {
return App.Person.find(params.person_id)
}
});
// This is the very first route of the application
// Most of the time, you'll simply redirect from your index to a resource
// in this example, from ~/#/ to ~/#/people
App.IndexRoute = Em.Route.extend({
redirect: function() {
this.transitionTo('people');
}
});
// The store manages your application data. Normally you only have to define
// the revision since it's not 1.0 yet (https://github.com/emberjs/data/blob/master/BREAKING_CHANGES.md)
// for this sample, I'm using the Fixture Adapter so I can add mock up data to the
// app while testing/coding front end
App.Store = DS.Store.extend({
revision: 11,
adapter: 'DS.FixtureAdapter'
});
// Using Ember-Data, you can define a Model object which uses application
// semantics to describe your data, and does many operations which you'd
// normally expect to see in a ORM. Ember-Data is no ORM, but it gets pretty close
// and in certain scenarios it goes beyond
App.Person = DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
fullName: function() {
return '%@ %@'.fmt(
this.get('firstName'),
this.get('lastName')
);
}.property('firstName', 'lastName')
});
// Using the FixtureAdapter you can add mockup data to your data store
App.Person.FIXTURES = [
{id: 1, firstName: 'Joe', lastName: 'Bloggs'},
{id: 2, firstName: 'Other', lastName: 'Dude'}
];
// when your controller wants to handle a collection, use ArrayController
App.PeopleController = Em.ArrayController.extend();
// when it handles a single object, use ObjectController
App.PeoplePersonController = Em.ObjectController.extend();