練習のために5回目に「従業員管理システム」を構築する予定です。私はコーディングのさまざまな方法を練習するたびに（うまくいけば、私はそれをうまくいくだろう）。私のチェーンはどこで壊れていますか？
後で私はいくつかのテキスト入力フォームと新しいus Employeeを登録するボタンを追加してリストに表示します。
今回は、このコードを「Web App」オリエンティシングで実行しています。 ほとんどのJavascriptですべてのHTMLを作成したいと思います。
- 教師
- 開発
- CEO ： は、私は、従業員の 3種類/クラスを持って最終的には、このシステムでは
index.html にいくつかのHTMLを挿入しますclass Item内部のテンプレートを作成しました
各従業員タイプには異なる方法があります。 しかし、すべてのタイプの従業員が受ける2つの方法があります。 sayHello()およびcheckIn()。他のすべてのタイプが継承するclass Employeeのおかげです。とにかく
..私は2つの小さな機能に分割されるレンダリング機能たかっItem.jsで
：
renderContainer（） - parent-を作成するためのテンプレートをユーザーの詳細のコンテナ。
renderDetails（） - ユーザーの詳細のテンプレート。
返された値を確認したい場所でconsole.logを使ってdebbugingしようとしました。私はまだデバッガとその恩恵をもっているわけではない。
私のコードで何が間違っているのか分かりますか？ この行に何が問題なのですか？ 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