Question

我一直在玩ES6课程，试图通过构建一个简单的MVC todo应用程序来更好地理解如何使用它们。我遇到了一个我无法理解的问题。我有一个app类来实例化其他类。模板类用于构建所有DOM元素，但DOM元素未按预期工作。例如，在将元素添加到DOM之后，按钮和图标字体将不会显示。

主要应用类：

import Template from './app/template';
import Model from './app/model';
import View from './app/view';
import Controller from './app/controller';

import Utils from './app/services/utils';

export default class App {
  constructor(config) {
    const id = config.id || 'todo';
    const cont = Utils.id(id);

    const template = new Template(cont);
    const model = new Model();
    const view = new View();
    this.controller = new Controller(model, view);
  }
}

var app = new App({
  id: 'app'
});

模板类：

import Utils from './services/utils';

export default class Template {
  constructor(domEl) {
    this.container = domEl;

    this.init();
  }

  init() {
    this.container.className = 'todo-container widget';

    let header = Utils.dom('header', {
      parent: this.container
    });

    let inputCont = Utils.dom('input', {
      parent: header,
      className: 'input-container',
    });

    let input = Utils.dom('input', {
      parent: inputCont,
      className: 'input',
      attributes: [
        { att: 'type', val: 'text' },
        { att: 'placeholder', val: 'Add a task...' }
      ]
    });

    let btnAdd = Utils.dom('button', {
      parent: inputCont,
      className: 'btn-add'
    });

    let btnAddIcon = Utils.dom('i', {
      parent: btnAdd,
      className: 'far fa-check-circle'
    });

    let todos = Utils.dom('ul', {
      parent: this.container,
      className: 'todos'
    });

  }
}

模板类使用一组简单的辅助方法：

const Utils = {

  qs: (selector, scope) => {
    return (document || scope).querySelector(selector);
  },

  id: (id) => {
    return document.getElementById(id);
  },

  $on: (target, type, callback, capture) => {
    return target.addEventListener(type, callback, !!capture);
  },

  dom: (name, options) => {
    let element = document.createElement(name);

    if (options.parent) {
      options.parent.appendChild(element);
    }

    if (options.text) {
      element.innerHTML = options.text;
    }

    if (options.className) {
      element.className = options.className;
    }

    if (options.id) {
      element.id = options.id;
    }

    if (options.attributes) {
      options.attributes.forEach(attr => {
        let att = attr['att'];
        let val = attr['val'];
        element.setAttribute(att, val);
      });
    }

    return element;
  }
};

export default Utils;

运行代码后，可以在检查器中找到元素：

但元素不起作用：

手动添加我动态生成的html会显示正确的结果：

我试图谷歌这个问题并没有发现任何东西。我还在模板初始化函数中获取了代码，并将其添加到构造函数中，从而得到相同的结果。

提前致谢。

Answer 1

您正在将标记作为input元素的子元素，导致它无法正常显示。尝试将inputCont替换为div。

let inputCont = Utils.dom('div', {
  parent: header,
  className: 'input-container',
});

JavaScript创建元素在ES6类中不起作用

1 个答案: