为什么我看不到渲染的<div>元素在这里？</div><div id="text_translate"><p> 我有一个部分 class 创建一个部分。 我正在使用 PizzaMenu class 从 UI 上的 data.json 文件中呈现每个披萨项目。 该代码对我来说似乎是正确的，应该呈现比萨饼，但事实并非如此。 以下是代码。<br> 我检查时得到<div id = "app">undefined</div> 。</p><p> 链接： <a href="https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&hidenavigation=1&theme=dark" rel="nofollow noreferrer">https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&hidenavigation=1&theme=dark</a></p><p> 应用程序.js</p><pre> class App { static pizzaMenu = new pizzaMenu(); static init() { const app = document.getElementById("app"); app.append(this.pizzaMenu.render()); } } App.init();</pre><p> PizzaMenu.js</p><pre> class pizzaMenu extends Section { constructor(title) { super(); this.title = title || "Loading..."; } render() { const pizzaMenuEl = this.createSection(); fetch("./data.json").then((response) => { console.log("Check 1"); return response.json(); }).then((data) => { data.pizza.forEach((item) => { console.log("Check 2"); pizzaMenuEl.innerHTML = ` <div class="shop-item" id = ${item.id} > <span class="shop-item-title">${item.name}</span> <span class="shop-item-img"></span> <div class="shop-item-details"> <div class = "shop-item-sizes"> <input type="radio" value="100" name="sizes"> <label>Small</label> <input type="radio" value="200" name="sizes"> <label>Medium</label> <input type="radio" value="300" name="sizes"> <label>Large</label> </div> <span class="shop-item-price">Rs.${item.price}</span> <button class="btn btn-primary shop-item-button">ADD TO CART</button> </div> </div>`; return pizzaMenuEl; }); }); } }</pre><p> 节.js</p><pre> class Section { // Classes must be passed as an array createSection(cssClasses) { const sectionEl = document.createElement("div"); sectionEl.classList.add("row"); if (cssClasses) { for (const cssClass of cssClasses) { sectionEl.classList.add(cssClass); } } return sectionEl; } }</pre><p> 索引.html</p><pre> <body> <div id="app"></div> <script src="section.js"></script> <script src="pizzaMenu.js"></script> <script src="app.js"></script> </body></pre><p> 数据.json</p><pre> { "pizza": [ { "id": 1, "name": "Tandoori Pizza", "image": "Images/pizza.png", "price": "Rs.200", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } }, { "id": 2, "name": "Veggie Supreme", "image": "Images/pizza.png", "price": "Rs.250", "sizes": { "Small": 100, "Medium": 200, "Large": 300 } } }</pre></div>
[英]Why am I unable to see the rendered <div> elements here?
问题描述
我有一个部分 class 创建一个部分。 我正在使用 PizzaMenu class 从 UI 上的 data.json 文件中呈现每个披萨项目。 该代码对我来说似乎是正确的，应该呈现比萨饼，但事实并非如此。 以下是代码。
我检查时得到<div id = "app">undefined</div> 。
链接： https://codesandbox.io/embed/dazzling-robinson-bsn5g?fontsize=14&hidenavigation=1&theme=dark
应用程序.js
class App {
static pizzaMenu = new pizzaMenu();
static init() {
const app = document.getElementById("app");
app.append(this.pizzaMenu.render());
}
}
App.init();
PizzaMenu.js
class pizzaMenu extends Section {
constructor(title) {
super();
this.title = title || "Loading...";
}
render() {
const pizzaMenuEl = this.createSection();
fetch("./data.json")
.then((response) => {
console.log("Check 1");
return response.json();
})
.then((data) => {
data.pizza.forEach((item) => {
console.log("Check 2");
pizzaMenuEl.innerHTML = `
<div class="shop-item" id = ${item.id} >
<span class="shop-item-title">${item.name}</span>
<span class="shop-item-img"></span>
<div class="shop-item-details">
<div class = "shop-item-sizes">
<input type="radio" value="100" name="sizes">
<label>Small</label>
<input type="radio" value="200" name="sizes">
<label>Medium</label>
<input type="radio" value="300" name="sizes">
<label>Large</label>
</div>
<span class="shop-item-price">Rs.${item.price}</span>
<button class="btn btn-primary shop-item-button">ADD TO CART</button>
</div>
</div>`;
return pizzaMenuEl;
});
});
}
}
节.js
class Section {
// Classes must be passed as an array
createSection(cssClasses) {
const sectionEl = document.createElement("div");
sectionEl.classList.add("row");
if (cssClasses) {
for (const cssClass of cssClasses) {
sectionEl.classList.add(cssClass);
}
}
return sectionEl;
}
}
索引.html
<body>
<div id="app"></div>
<script src="section.js"></script>
<script src="pizzaMenu.js"></script>
<script src="app.js"></script>
</body>
数据.json
{
"pizza": [
{
"id": 1,
"name": "Tandoori Pizza",
"image": "Images/pizza.png",
"price": "Rs.200",
"sizes": { "Small": 100, "Medium": 200, "Large": 300 }
},
{
"id": 2,
"name": "Veggie Supreme",
"image": "Images/pizza.png",
"price": "Rs.250",
"sizes": { "Small": 100, "Medium": 200, "Large": 300 }
}
}
1 个解决方案
解决方案1
2 已采纳 2021-04-29 11:43:25
这可能是因为您没有从 PizzaMenu.render() function 返回任何内容。
我已经稍微更改了您的代码以使其正常工作。
看看这个我做了https://replit.com/@beesperester/RichBelovedApplicationstack
应用程序.js
class App {
static init() {
const pizzaMenuInstance = new pizzaMenu();
const app = document.getElementById("app");
// pass the app dom node to the render function
pizzaMenuInstance.render(app)
}
}
App.init();
PizzaMenu.js
class pizzaMenu extends Section {
constructor(title) {
super();
this.title = title || "Loading...";
}
render(app) {
fetch("menu.json")
.then((response) => {
console.log("Check 1");
return response.json();
})
.then((data) => {
data.pizza.forEach((item) => {
// create a new div element for every item
const pizzaMenuEl = this.createSection();
console.log("Check 2");
pizzaMenuEl.innerHTML = `
<div class="shop-item" id="${item.id}">
<span class="shop-item-title">${item.name}</span>
<span class="shop-item-img"></span>
<div class="shop-item-details">
<div class = "shop-item-sizes">
<input type="radio" value="100" name="sizes">
<label>Small</label>
<input type="radio" value="200" name="sizes">
<label>Medium</label>
<input type="radio" value="300" name="sizes">
<label>Large</label>
</div>
<span class="shop-item-price">Rs.${item.price}</span>
<button class="btn btn-primary shop-item-button">ADD TO CART</button>
</div>
</div>`;
// use the method "appendChild" of the app instance
// to append the child element
app.appendChild(pizzaMenuEl)
});
});
}
}
为什么我不能在这里使用 mockResolvedValue？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.