如何在EmberJS中呈现除application.hbs以外的模板?
在EmberJS中,主模板文件是application.hbs
。 从路线中呈现的任何模板都将转到此主模板文件的{{outlet}}
。
现在,我有另一个主要模板文件,比如print.hbs
其中模板设计与application.hbs有很大不同。 我该怎么做呢?
在路由器文件中,我有:
App.Router.map(function() {
this.resource('print', function() {
this.route('display1');
this.route('display2');
});
this.route('dashboard', {path: '/'});
this.route('anything');
});
路线dashboard
和anything
使用application.hbs
anything
。 我应该如何在print
路径上使用print.hbs
? 请帮忙。
您无法轻松更改应用程序模板。 当您试图自己重新渲染模板时,Ember不会监听templateName
属性更改并且响应不佳。
根据你是处于“屏幕”还是“打印”模式,一个很好的方法是使用应用程序模板中的不同部分。
<script type="text/x-handlebars">
{{#if isPrint}}
{{partial "application-print"}}
{{else}}
{{partial "application-normal"}}
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name="application-normal">
<div id="app-normal">
<h2>Normal template</h2>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="application-print">
<div id="app-print">
<h2>Print template</h2>
{{outlet}}
</div>
</script>
App.ApplicationController = Ember.Controller.extend({
isPrint: false,
currentPathChange: function () {
var currentPath = this.get("currentPath");
var isPrint = currentPath ? currentPath.indexOf("print") === 0 : false;
this.set("isPrint", isPrint);
}.observes('currentPath').on("init")
});
这JSBin将演示为什么这不幸,也不工作。 根据这个错误报告,当同一页面有多个outlet
指令时,即使它们在不同的#if
范围内,Ember的把手也会混淆。
在此问题得到解决之前,我提出以下稍作修改的解决方案。
应用程序模板是空的。 正常和打印部分各有一个模板。
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="normal">
<div id="app-normal">
<h2>Normal template</h2>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="print">
<div id="app-print">
<h2>Print template</h2>
{{outlet}}
</div>
</script>
在路由器中,一切都进入正常和打印资源。 普通资源放置在/处,以便所有链接保持不变。 在ApplicationController中无需特殊编码。
App.Router.map(function() {
this.resource("print", function () {
this.route("a");
this.route("b");
});
this.resource("normal", {path: "/"}, function () {
this.route("a");
this.route("b");
});
});
在这里工作jsbin。
链接地址: http://www.djcxy.com/p/79669.html上一篇: How to render template other than application.hbs in EmberJS?