0
爲了實踐目的，第五次建立「員工管理系統」。每次我練習不同的編碼方式（希望我能及時做到）。我的鏈條在哪裏破碎？
稍後我將添加一個表單，其中包含一些文本輸入和一個按鈕，該按鈕將註冊新的美國Employee並將其顯示在列表中。
但這次我正在用「Web App」方向進行此代碼。 我想通過大多數Javascript創建我的所有HTML。 我創建內部class Item模板，最終將在這個系統中注入一些HTML來index.html
我公司員工的3種/類：
- 教師
- 開發
- CEO
每個員工類型都有不同的方法。 但是有兩種方法可以讓所有類型的員工獲得。 sayHello()和checkIn()。感謝class Employee所有其他類型繼承。
反正..
在Item.js我想渲染功能將被分成兩個較小的功能：
renderContainer（） - 模板創建父 - 容器爲用戶提供詳細信息。
renderDetails（） - 用戶詳細信息的模板。
我試圖在console.log中使用consoleblog去檢查返回值的地方。調試器和專業人員，我不是那個家族。
你能告訴我的代碼有什麼問題嗎？ 這條線有什麼問題？ this.container.find(".employee").html($details);
爲什麼它的價值被正確地傳遞到renderContainer()被調用？
Git倉庫： https://github.com/ueeieiie/ems3
的script.js文件：
require('../styles/styles.scss');
import Employee from './Employee.js';
import Teacher from './Teacher.js';
import Developer from './Developer.js';
import CEO from './CEO.js';
import Item from './Item.js';
var $ = require('jquery');
// udi
var udi = new CEO("Udi", "Cinephile", "CEO");
var udiItem = new Item(udi);
udiItem.renderContainer();
// rani
var rani = new Developer("rani", "Jaggling", "Developer");
var raniItem = new Item(rani);
raniItem.renderContainer();
CEO.js文件：
import Employee from './Employee.js';
export default class CEO extends Employee {
constructor(name, skill, title){
super(name, skill, title="CEO")
}
fireEveryone(){
console.log(this.name + " has fired EVERYONE!");
}
}
開發。JS文件：
import Employee from './Employee.js';
export default class Developer extends Employee {
constructor(name, skill, title){
super(name, skill, title="Developer");
}
pushCode(){
console.log(this.name + " has pushed some code.");
}
}
Employee.js文件：
export default class Employee {
constructor(name, skill, title){
this.name = name;
this.skill = skill;
this.title = title;
}
sayHello(){
console.log(this.name + " said hello");
}
checkIn(){
console.log(new Date());
}
}
Item.js文件：
var id = 0;
var $ = require('jquery');
export default class Item{
constructor(user){
this.id = this.getId();
this.name = user.name;
this.skill = user.skill;
this.title = user.title;
}
renderContainer(){
var $container = $(`
<dl class="employee">
</dl>
`);
this.container = $container;
this.renderDetails();
$('.content').append($container);
}
renderDetails(){
var $details = $(`
<p>
<dt>ID: </dt>
<dd>${this.id}</dd>
</p>
<p>
<dt>Name: </dt>
<dd>${this.name}</dd>
</p>
<p>
<dt>Skill: </dt>
<dd>${this.skill}</dd>
</p>
<p>
<dt>Title: </dt>
<dd>${this.title}</dd>
</p>
`);
this.container.find(".employee").html($details);
// $('.content').append($details); //works fine with no need of renderContainer()
}
getId(){
return id++;
}
}
的index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="content">
<!-- template comes here -->
</div>
</body>
</html>
你可以問一個更具體的問題，「爲什麼不起作用」？請描述當你運行你的代碼時發生了什麼，以及你期望的與實際發生的不同。並且，描述何時調試步驟以及您在調試過程中學到了什麼（console.log語句，斷點等等）。 – jfriend00
是的，謝謝，我會更具體和更新 – ueeieiie