免費(fèi)AI編程助手
EmberJS 視圖
2020-07-17 09:20 更新
介紹
Ember.js中的視圖用于處理用戶事件，并創(chuàng)建可重復(fù)使用的組件。UI將通過使用視圖來開發(fā)。
下圖顯示了事件處理如何發(fā)生：
當(dāng)用戶單擊事件時(shí)，視圖將原始事件（單擊）轉(zhuǎn)換為語義事件（事件處理），并傳遞到Ember.Route以獲取事件操作。
定義視圖
Ember.js中的Handlebars模板功能強(qiáng)大，可以通過使用Ember.View來渲染并插入到DOM中。您可以設(shè)置視圖的templateName屬性以指示要使用的模板。
Ember.View.create（{
templateName: 'NameOfTemplate',
//do the logic
}）;
在上面的代碼中，templateName確定在應(yīng)用程序請(qǐng)求視圖時(shí)應(yīng)渲染哪個(gè)模板。
例子
<!DOCTYPE html> <html> <head> <title>Emberjs Defining a View</title> <!-- CDN's--> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script> <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script> <script src="https://builds.emberjs.com/release/ember.debug.js"></script> <script src="https://builds.emberjs.com/beta/ember-data.js"></script> </head> <body> <script type="text/x-handlebars"> <!-- defining the view name --> {{view "hello"}} </script> <script type="text/x-handlebars" data-template-name="hello"> <!-- accessing the 'name' value defined in the 'View' --> Hello, <b>{{view.name}}</b> </script> <script type="text/javascript"> App = Ember.Application.create(); //extending View class App.HelloView = Ember.View.create({ //template name 'hello' templateName: 'hello', //define the value for name property name: "Welcome to Tutorialspoint" }); </script> </body> </html>
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：
將上面的代碼保存在view.html文件中
在瀏覽器中打開此HTML文件。
讓我們通過點(diǎn)擊以下鏈接查看更多關(guān)于視圖的詳細(xì)信息：
以上內(nèi)容是否對(duì)您有幫助：
更多建議：