Javascript 文本/x形把手从未出现_Javascript_Html_Ember.js_Handlebars.js

Javascript 文本/x形把手从未出现

javascript html ember.js

Javascript 文本/x形把手从未出现,javascript,html,ember.js,handlebars.js,Javascript,Html,Ember.js,Handlebars.js,我正在尝试开发我的第一个应用程序，但我无法让浏览器显示我的把手脚本这是我的html： <!doctype html> <html> <head> <title>Random Presents</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="

我正在尝试开发我的第一个应用程序，但我无法让浏览器显示我的把手脚本

这是我的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>

当我加载文件时；页面是空的，即使源代码对应于我的html文件。我在chrome javascript控制台中没有看到任何错误

有什么明显的东西我错过了吗？我测试了这些库，它们直接来自网站，并且是最新版本

更糟糕的是，我甚至尝试使用只包含html的脚本，他也不会加载任何内容。

在模板中，默认上下文是控制器，因此需要显式引用视图以访问其属性：

{{view.property}

在您的示例中：

{{#view App.AView}}{{view.surname}}{{/view}}

在模板中，默认上下文是控制器，因此需要显式引用视图以访问其属性：

{{view.property}

在您的示例中：

{{#view App.AView}}{{view.surname}}{{/view}}

因为您在

视图

类中创建了属性，所以您应该使用

视图

属性，在某些情况下，该属性与

this

关键字类似

将模板更改为：

<script type="text/x-handlebars">
    {{#view App.AView}}
        {{view.firstName}}
        {{view.surname}}
    {{/view}}
</script>

JavaScript：

<!-- 
    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>

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();

因为您在

视图

类中创建了属性，所以应该使用

视图

属性，在某些情况下，该属性与

this

关键字类似

将模板更改为：

<script type="text/x-handlebars">
    {{#view App.AView}}
        {{view.firstName}}
        {{view.surname}}
    {{/view}}
</script>

JavaScript：

<!-- 
    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>

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();

非常感谢你！我会深入研究的。事实上，我有一个带有模型和控制器的应用程序，但到目前为止，我的任何手柄脚本都无法显示任何内容，这就是我将其剥离的原因。我肯定会根据您的建议对其进行新的尝试！再次感谢您！我会深入研究的。事实上，我有一个带有模型和控制器的应用程序，但到目前为止，我的任何手柄脚本都无法显示任何内容，这就是我将其剥离的原因。我肯定会根据您的建议对其进行新的尝试！又是thx