免費(fèi)AI編程助手
EmberJS 在組件中包裝內(nèi)容
2018-01-03 13:54 更新
在組件中包裝內(nèi)容
您還可以定義一個組件，幫助封裝其他模板提供的內(nèi)容，并將屬性傳遞給另一個模板。該組件還支持塊形式，并且在模板中以＃符號為前綴。
<script type="text/x-handlebars">
//component name
{{my-comp title=title body=body}}
</script>
<script type="text/x-handlebars" data-template-name="components/my-comp">
// This is the component
{{title}} {{body}}
</script>
在上面的代碼中，我們將 title 和 body 屬性傳遞給另一個模板。
例子
<!DOCTYPE html>
<html>
<head>
<title>Emberjs Wrapping Content in a Component</title>
<!-- CDN's-->
<script src="/attachements/w3c/handlebars.min.js"></script>
<script src="/attachements/w3c/jquery-2.1.3.min.js"></script>
<script src="/attachements/w3c/ember.min.js"></script>
<script src="/attachements/w3c/ember-template-compiler.js"></script>
<script src="/attachements/w3c/ember.debug.js"></script>
<script src="/attachements/w3c/ember-data.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
<b>Click the button to check title property value</b>
<p>{{my-comp title=title action="compFunc"}}</p>
</script>
<script type="text/x-handlebars" data-template-name="components/my-comp">
<input type="button" value="Click me" {{action "compFunc"}} /><br/>
<!-- wrapping the 'title' property value -->
<p><b>Title:</b> {{title}}</p>
</script>
<script type="text/javascript">
App = Ember.Application.create();
App.MyCompComponent = Ember.Component.extend({
//defining the action hook to set the title property value
actions: {
compFunc: function() {
this.set('title', "Tutorialspoint...");
//This method sends the specified action
this.sendAction();
}
}
});
</script>
</body>
</html>
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作：
將上面的代碼保存在 comp_wrap.html 文件中
在瀏覽器中打開此HTML文件。
以上內(nèi)容是否對您有幫助：
更多建議：