JavaScript create元素在ES6类中不起作用

Question

Ive been playing around with ES6 classes trying to get a better understanding of how to use them by building a simple MVC todo app. I ran into an issue that I have not been able to understand. I have an app class that instantiates the other classes. The template class is used to build all the DOM elements which is does, but the DOM elements are not working as expected. For example the button and icon font will not show after the elements are added to the DOM.

The Main Application Class:

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'
});

The Template Class:

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'
    });

  }
}

The Template Class uses a group of simple helper methods:

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;

When the code is ran the elements can be found in the inspector:

But the elements are not working:

Manually adding the html I generated dynamically shows the proper results:

I have attempting to Google the issue and found nothing. I have also taken the code in the Template init function and added it to the constructor which gives the same results.

Thanks in advance.

Answer 1

You're making your markup the child of an input element, causing it not to display properly. Try making inputCont a div instead.

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