Ember-js链接到父记录

Ember js link to the parent record

本文关键字：记录 链接 Ember-js      更新时间：2023-09-26

我正在使用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"
    }) 
}

您可以找到特定员工emp的经理记录，并将其作为引用传递给{{linkTo}}助手。这可以通过使用计算属性来完成，也可以使用成员数据关联。

相关文章：