Einfaches einfaches JavaScript MVC

Ich baue ein einfaches Skript, um zu verstehen, wie mvc funktioniert. Ich bin neu hier und schaue gerne, ob da draußen irgendjemand mir helfen kann. Ich kann meine Renderfunktion nicht dazu bringen, den Inhalt des Modells anzuzeigen. Ich erhalte einen Fehler in meiner Konsole:Einfaches einfaches JavaScript MVC

"app.js: 33 Uncaught TypeError: Fehler beim Ausführen von 'appendChild' auf 'Node': Parameter 1 ist nicht vom Typ 'Node'."

Jede Hilfe mit diesem würde geschätzt werden.

var model = { 
 
\t farm: { 
 
\t \t cow: "Moo!", 
 
\t \t pig: "Oink!", 
 
\t \t duck: "Quack!" 
 
\t } 
 
}; 
 

 
var controller = { 
 
\t init: function() { 
 
\t \t farmView.init(); 
 
\t }, 
 
\t getBarn: function() { 
 
\t \t return model.farm; 
 
\t } 
 
}; 
 

 
\t 
 
var farmView = { 
 
\t \t 
 
\t \t init: function() { 
 
\t \t \t this.barn = document.getElementById('farm'); 
 
\t \t \t this.render(); 
 
\t \t }, 
 
\t \t 
 
\t \t render: function() { 
 
\t \t \t var animals = controller.getBarn(); 
 
\t \t \t var examplediv = document.getElementById('cow'); 
 
\t \t \t this.barn.innerHTML = ''; 
 
\t \t \t var htmlStr = ''; 
 
\t \t \t htmlStr += '<span>' + model.farm.cow + '</span>' + '<span>' + model.farm.pig + '</span>'; 
 

 
\t \t \t this.barn.appendChild(htmlStr); 
 
\t \t \t examplediv.appendChild(htmlStr); 
 
\t \t \t 
 
\t \t } 
 
\t \t 
 
}; 
 
\t 
 
controller.init();

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Farmcow</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div id="farm"> 
 
\t \t <div id="cow"></div> 
 
\t </div> 
 
    <script src="app.js"></script> 
 
</body> 
 
</html>

Quelle

2017-08-01 user3205055

Die Fehlermeldung scheint es klar zu sagen, was man als Argument übergeben an die appendChild ist nicht von einem Knotentyp. Sie wollten möglicherweise createElement aufrufen, um ein neues Element zu haben, sein inneresHtml setzen und es dann nur anhängen. Wenn das so ist, poste ich es als Antwort. –

Die examplediv-Variable hat den Typ Objekt. Ich habe versucht, was Sie empfohlen, bevor Sie dies zu veröffentlichen und konnte nicht den Inhalt der htmlStr-Variable, um als untergeordnet an die examplediv-Variable anhängen. Vielen Dank für Ihr Feedback. – user3205055

Ich bin mir nicht sicher, ob du meinen Kommentar richtig gelesen hast. Das examplediv hat nichts zu tun, Ihr Argument für appendChild ist falsch. Sie können dort keine Zeichenfolgen übergeben und Ihre htmlStr ist eine Zeichenfolge. –

Die Fehlermeldung erscheint es klar zu sagen, was Sie als Argument an die appendChild passieren nicht von einem Knotentyp, ist es ein String ist.

Sie wollten möglicherweise zuerst document.createElement aufrufen, um ein neues Element zu haben, dann setzen Sie innerHTML und fügen Sie es erst dann an. Dies funktioniert, da das neu erstellte Element einen Typ hat, der von appendChild akzeptiert wird.

Quelle

2017-08-01 19:25:23

Wie der Fehler zeigt, erwartet appendChild()Node, keine Zeichenfolge. Verwenden Sie insertAdjacentHTML() mit dem Argument beforeend:

var model = { 
 
    farm: { 
 
    cow: "Moo!", 
 
    pig: "Oink!", 
 
    duck: "Quack!" 
 
    } 
 
}; 
 

 
var controller = { 
 
    init: function() { 
 
    farmView.init(); 
 
    }, 
 
    getBarn: function() { 
 
    return model.farm; 
 
    } 
 
}; 
 

 

 
var farmView = { 
 

 
    init: function() { 
 
    this.barn = document.getElementById('farm'); 
 
    this.render(); 
 
    }, 
 

 
    render: function() { 
 
    var animals = controller.getBarn(); 
 
    this.barn.innerHTML = ''; 
 
    var htmlStr = ''; 
 
    htmlStr += '<span>' + model.farm.cow + '</span> <span>' + model.farm.pig + '</span>'; 
 

 
    this.barn.insertAdjacentHTML('beforeend', htmlStr); 
 
    } 
 

 
}; 
 

 
controller.init();

<div id="farm"></div>

Quelle

2017-08-01 19:33:11

Einfaches einfaches JavaScript MVC

Antwort

Verwandte Themen