Question

我想建立一个＆＃34;员工管理系统＆＃34;为练习目的第5次。每次我练习不同的编码方式（希望我及时擅长）。

稍后，我将添加一个带有一些文本输入的表单和一个按钮，该按钮将注册新的员工并将其显示在列表中。

但这次我正在使用＆＃34; Web App＆＃34; orientationish。我想通过大多数Javascript来创建我的所有HTML。我在class Item中创建了一个模板，最终会将一些html注入index.html

在这个系统中我有 3种类型/类别的员工：

教师
开发
CEO

每种员工类型都有不同的方法。但是，所有类型的员工都有两种方法。 sayHello()和checkIn()。感谢所有其他类型继承的class Employee。

反正..

Item.js

我希望将渲染函数分解为两个较小的函数：

renderContainer（） - 用于为用户详细信息创建父容器的模板。
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!");
    }
}

Developer.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>

Answer 1

你能说出我的代码有什么问题吗？这条线有什么问题 this.container.find(".employee").html($details);？

this.container是这个jQuery对象：

    $(`
        <dl class="employee">

        </dl>
    `);

当您致电.find()时，它会在<dl>内搜索.employee，因为.find()仅搜索后代。但是，.employee对象中没有<dl>，因此它返回一个空的jQuery对象，调用.html()然后不执行任何操作。您要定位的.employee已经是父项，而不是后代。

这是jQuery doc对.find()所说的内容：

获取当前匹配组中每个元素的后代元素，由选择器，jQuery对象或元素过滤。

您可以通过更改此代码来修复该代码：

this.container.find(".employee").html($details);

到此：

this.container.html($details);

或者，如果您希望代码处理模板的能力，其中.employee是父项或后代，您可以测试它是父项：

if (this.container.is(".employee") {
    this.container.html($details);
} else {
    this.container.find(".employee").html($details);
}

我的连锁店在哪里破了？

1 个答案: