2013-07-21 35 views
0

我正在使用Ember显示管理器和reportee层次结构创建一个简单的应用程序。 链接按钮应该借给经理的页面,我想将它显示在与其reportee相同的模板中,因为经理也是员工之一。任何人都可以建议如何做到这一点。Ember js链接到父记录

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" : "[email protected]" , 
    "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" : "[email protected]" , 
    "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" : "[email protected]" , 
    "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" : "[email protected]" , 
    "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" : "[email protected]" , 
    "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" : "[email protected]" , 
    "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" : "jo[email protected]" , 
    "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" : "[email protected]" , 
    "phone" : "888873687" , 
    "address" : "hine" , 
    "manager" : "John" , 
    "manager-id" : "2" , 
    "department" : "core-tech" , 
    "designation" : "tech" 
    }) 
} 
+0

你可以添加你到目前为止的代码吗? –

+0

@BradleyPriest代码粘贴。这里我想在关联的员工被点击后显示经理的详细信息。 – Raja

回答

0

你可以找到经理记录特定员工emp并把它作为参考{{linkTo}}帮手。这可以通过使用computed properties或您可以使用ember-data associations

+0

PLz检查代码,点击empid我正在获取emp细节,并且我已经将manager-id保存为员工的一个属性,该员工本身是一个员工ID,点击manager标签后,该ID显示得到显示。计算的属性如何在这里帮助? – Raja

+0

查看#linkTo助手,您正确地获得了{{#linkTo'employee'emp}}。在这个'emp'中是表达式/变量,它被用作下一个路由的参考模型。这就是为什么当你点击id或name时,你会得到相应的传递'emp'记录的细节。使用计算属性,你可以传递一些像emp.manager这样的工作。 –

+0

#linkTo只为特定员工工作,但如何保持经理的状态并显示它。 – Raja