我正在使用 Ember 创建一个简单的应用程序,显示经理和报告者层次结构。按钮的链接应该把我借给经理的页面,我想在与其报告人相同的模板中显示它,因为经理也是员工之一。谁能建议如何做到这一点。
应用程序.js
App = Ember.Application.create(
{
LOG_TRANSITION:true
}
);
App.Router.map(function() {
this.route("employees");
this.resource('employee' , { path:"/employee/:employee_id"});
App.EmployeesRoute = Ember.Route.extend({
model: function() {
var emp = [];
for ( var i in App.Employees){
emp.push(App.Employees[i]);
}
return emp;
}
});
App.Employee = Ember.Object.extend( {
"id": null ,
"empid": null ,
"name" : null ,
"age" : null ,
"sex": null ,
"dob" : null ,
"email": null ,
"phone": null ,
"address": null ,
"manager": null ,
"manager-id" : null ,
"department" : null ,
"designation" : null
})
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/x-handlebars">
<h1 align="center">Ember WorkShop Accolite AU</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
<script type="text/x-handlebars" data-template-name="employees">
<table>
<tr bgcolor=lightblue>
<td>NAME</td><td>EMP-ID</td><td>AGE</td><td>SEX</td><td>DOB</td><td>E-MAIL</td><td>PHONE</td><td>MANAGER</td></tr>
{{#each emp in model }}
{{this.manager_id}}
<tr>
<td class= "span1"> {{#linkTo 'employee' emp }}{{emp.name}}{{/linkTo}}</td>
<td class="span1">{{#linkTo 'employee' emp}}{{emp.empid}}{{/linkTo}}</td>
<td class="span1"> {{emp.age}}</td>
<td class="span1"> {{emp.sex}}</td>
<td class="span2"> {{emp.dob}}</td>
<td class="span2"> {{emp.email}}</td>
<td class="span2"> {{emp.phone}}</td>
<td class="span1"> {{emp.manager}}</td>
</tr>
{{/each}}
<tr bgcolor = lightblue>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</script>
<script type="text/x-handlebars" data-template-name="employee">
{{#linkTo 'employees'}} BackButton {{/linkTo}}</br>
EMPID : {{empid}} </br>
Name : {{name}} </br>
Age : {{age}} </br>
DOB : {{dob}} </br>
Gender : {{sex}} </br>
Email: {{email}} </br>
Phone: {{phone}} </br>
Address: {{address}}</br>
Manager : {{manager}}</br>
Department: {{department}} </br>
Designation: {{designation}} </br>
<br><br>
</script>
<script src="js/libs/jquery-1.9.1.js"></script>
<script src="js/libs/handlebars-1.0.0-rc.4.js"></script>
<script src="js/libs/ember-1.0.0-rc.6.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/app.js"></script>
<script src="js/employees.js"></script>
</body>
</html>
员工.js
App.Employees ={
"1" : App.Employee.create ({
"id" : "1" ,
"empid" : "id1",
"name" : "Maxwell",
"age" : "53" ,
"sex" : "M",
"dob" : "23-4-1978" ,
"email" : "max@accolite.com" ,
"phone" : "765873687" ,
"address" : "Seattle" ,
"manager" : "None" ,
"manager-id" : "None" ,
"department" : "core-tech" ,
"designation" : "tech"
}) ,
"2" : App.Employee.create ({
"id" : "2" ,
"empid" : "id2",
"name" : "peter",
"age" : "35" ,
"sex" : "M",
"dob" : "2-3-1998" ,
"email" : "p@accolite.com" ,
"phone" : "765873687" ,
"address" : "hine" ,
"manager" : "none" ,
"manager-id" : "2" ,
"department" : "core-tech" ,
"designation" : "tech"
}) ,
"3" : App.Employee.create ({
"id" : "3" ,
"empid" : "id3",
"name" : "John",
"age" : "23" ,
"sex" : "M",
"dob" : "30-4-1988" ,
"email" : "john@accolite.com" ,
"phone" : "765873687" ,
"address" : "mountain view" ,
"manager" : "peter" ,
"manager-id" : "87" ,
"department" : "core-tech" ,
"designation" : "techie"
}) ,
"4" : App.Employee.create ({
"id" : "4" ,
"empid" : "id4",
"name" : "hitler",
"age" : "35" ,
"sex" : "M",
"dob" : "23-4-1978" ,
"email" : "p@g.com" ,
"phone" : "765873687" ,
"address" : "hine" ,
"manager" : "John" ,
"manager-id" : "2" ,
"department" : "core-tech" ,
"designation" : "tech"
}) ,
"5" : App.Employee.create ({
"id" : "5" ,
"empid" : "id5",
"name" : "Elson",
"age" : "23" ,
"sex" : "M",
"dob" : "23-4-1978" ,
"email" : "m@accolite.com" ,
"phone" : "765873687" ,
"address" : "hine" ,
"manager" : "peter" ,
"manager-id" : "87" ,
"department" : "core-tech" ,
"designation" : "tech"
}) ,
"6" : App.Employee.create ({
"id" : "6" ,
"empid" : "id6",
"name" : "Victor",
"age" : "35" ,
"sex" : "M",
"dob" : "23-4-1978" ,
"email" : "v@accolite.com" ,
"phone" : "765873687" ,
"address" : "hine" ,
"manager" : "none" ,
"manager-id" : "2" ,
"department" : "core-tech" ,
"designation" : "tech"
}) ,
"7" : App.Employee.create ({
"id" : "7" ,
"empid" : "id7",
"name" : "Gennedy",
"age" : "83" ,
"sex" : "M",
"dob" : "23-4-1978" ,
"email" : "john@accolite.com" ,
"phone" : "765873687" ,
"address" : "mountain view" ,
"manager" : "peter" ,
"manager-id" : "87" ,
"department" : "core-tech" ,
"designation" : "techie"
}) ,
"8" : App.Employee.create ({
"id" : "8" ,
"empid" : "id8",
"name" : "Lisa",
"age" : "35" ,
"sex" : "F",
"dob" : "23-4-1978" ,
"email" : "p@accolite.com" ,
"phone" : "888873687" ,
"address" : "hine" ,
"manager" : "John" ,
"manager-id" : "2" ,
"department" : "core-tech" ,
"designation" : "tech"
})
}