簡單的普通JavaScript MVC

我正在構建一個簡單的腳本來理解mvc是如何工作的。我是新手，想看看有沒有人能幫助我。我無法讓我的渲染功能顯示模型中的內容。我的控制檯出現錯誤：簡單的普通JavaScript MVC

「app.js：33 Uncaught TypeError：無法在'節點'上執行'appendChild'：參數1不是'節點'類型。

任何幫助，這將不勝感激。

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>

來源

2017-08-01 user3205055

該錯誤消息似乎是說清楚，你傳遞什麼作爲參數傳遞給的appendChild是節點類型的不是。你可能打算調用createElement來獲得一個新的元素，設置它的innerHtml，然後才能追加它。如果是這樣，我會把它作爲答案。 –

examplediv變量是object類型的。我在發佈之前嘗試了你推薦的內容，無法獲得htmlStr變量的內容作爲子節點追加到examplediv變量中。不過，感謝您的反饋。 – user3205055

我不確定你是否正確地收到我的評論。 examplediv無關，你對appendChild的參數不正確。你不能在那裏傳遞字符串，你的htmlStr是一個字符串。 –

該錯誤消息似乎是說清楚，你傳遞什麼作爲參數傳遞給appendChild不是一個節點類型的，它是一個字符串。

您可能打算先致電document.createElement以獲得新元素，然後設置它的innerHTML，然後纔可以追加它。這將起作用，因爲新創建的元素將具有由appendChild接受的類型。

來源

2017-08-01 19:25:23

由於錯誤指出，appendChild()預計Node，而不是一個字符串。使用insertAdjacentHTML()的說法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>

來源

2017-08-01 19:33:11

簡單的普通JavaScript MVC

回答

相關問題