2013-03-07 22 views
0

我想發展我的第一個應用程序,我不能讓瀏覽器顯示我的車把腳本文/ X車把從不說明

這裏是我的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的腳本,他也不會加載。

回答

2

在模板默認情況下是控制器,所以你需要顯式引用視圖來訪問它的屬性:{{view.property}}

在您的例子:

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

Working example JSBin

3

因爲你在View類中創建了屬性,在某些情況下,應該使用view屬性,該屬性有點類似於this關鍵字。

您的模板更改爲:

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

由於灰燼的約定,從您的代碼都車把模板代表同樣的事情。沒有名字時,Ember假定模板名稱爲「應用程序」。這意味着即使您將兩個模板上的屬性修改爲{{view.propertyName}},後面的一個也會覆蓋第一個(或所有具有相同名稱的前輩),因爲Ember會將模板(使用Handlebars)編譯爲模板函數,並且名稱將會用作模板集合的關鍵(路徑Ember.TEMPLATES),所以這就是爲什麼您需要將這些表達式移動到上面代碼中的單個模板。

但是你應該避免使用這樣的視圖。

視圖應顯示數據,但不應保留數據。你的數據應該存在於模型中(在商店中),並且視圖應該向控制器詢問數據,並且它應該從疼痛中得到它。控制器應該通過路由器填充商店的數據(它知道該做什麼以及何時做)。

我並不是說這種方式不好,只是爲了避免你從Ember賽事開始就在街道的錯誤位置駕駛。

這是衆所周知的,有很多過時的教程,這導致了很多混亂有時(有repo與過時的教程/文章,應接收通知更新或添加disclaimar)。但一般來說,我建議你按照guides,看一些videos about Ember,檢查otherresourcesavailable在互聯網上。

這裏是一個非常基本的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(); 
+1

非常感謝!我會深入瞭解這一點。實際上,我有一個模型和控制器的應用程序,但不能讓我的任何手柄腳本顯示任何東西到目前爲止,這就是爲什麼我剝離它的方式。我一定會給你一個新的鏡頭與您的建議! thx再次 – jlengrand 2013-03-08 16:10:57