Question

我正在使用Ember创建一个简单的应用程序，显示管理器和报告者层次结构。指向按钮的链接应该将我借给经理的页面，并且我希望将其显示在与其报表者相同的模板中，因为经理也是该员工之一。任何人都可以建议如何做到这一点。

App.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
})

的index.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>

employees.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"
    }) 
}

Answer 1

您可以找到特定员工emp的经理记录，并将其作为{{linkTo}}帮助者的参考传递。这可以使用computed properties完成，也可以使用ember-data associations。

Ember js链接到父记录

1 个答案: