您好，我的symfony 專案中有一個刺激代碼。此代碼正在呼叫一個休息 API，它需要大約 3 秒來提供回應。這個 rest api 回傳 JSON。
這是我的代碼：
import {Controller} from "@hotwired/stimulus";
import axios from "axios";
export default class extends Controller {
static values = {
url: String
}
connect() {
axios.get(this.urlValue)
.then((r) => {
if (r.data !== null) {
let html
const tmp = JSON.parse(r.data)
if (tmp === null) {
html = document.createElement("div")
html.classList.add("alert", "alert-danger", "alert-dismissible", "fade", "show")
html.innerHTML = "Asset Number Not Valid";
html.innerHTML = "<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>"
} else {
html = document.createElement("ul")
html.classList.add("list-group")
for(let key in tmp) {
html.innerHTML = "<li class=\"list-group-item\">" key " : " tmp[key] "</li>";
}
html.innerHTML = "</ul>";
}
this.element.replaceWith(html);
}
})
}
}
如您所見，它正在構建串列或顯示錯誤。這段代碼非常簡單并且運行良好。我只是不喜歡 html 的構建方式。
你有任何其他/更清潔的方式嗎？
uj5u.com熱心網友回復：
您可以在 connect 方法下方的單獨函式中創建 HTML，例如：
errorMessage() {
const div = document.createElement("div");
div.innerHTML = `
<p>Some HTML here</p>
... More html
`
return div;
}
然后作為回應，您只需致電：
this.errorMessage();
成功回應也是如此。因此，最后在您的回復中，您可以擁有this.errorMessage()或this.appendList()任何您要呼叫的函式。
uj5u.com熱心網友回復：
這是一種不同的方法，基本上是利用 HTML 模板元素將所有 HTML 移回 HTML 檔案中。
當您在 Stimulus 控制器中構建過多的 HTML 時，它可能會變得一團糟，相反，請考慮目標的強大功能，因為它能夠定位任何元素，包括模板，甚至是您動態添加的東西。
控制器
- 我們為我們的 HTML 創建了一些
template目標，我們將在注入時將其用作復制的基礎。 - 我們還有一個
error和 item` 目標名稱，以便能夠輕松洗掉任何錯誤或添加的專案。 results目標將容納注入的結果（專案模板）。- 為了安全起見，我們也將使用
innerText而不是。innerHtml
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
static targets = [
'error',
'errorTemplate',
'item',
'itemTemplate',
'results',
];
static values = {
url: String,
};
connect() {
this.clearError();
this.clearResults();
fetch(/* or axios */)
.then(/* json parsing etc */)
.then((items) => {
items.forEach((value) => {
this.addResultItem(value);
});
})
.catch((error) => {
// be sure to handle errors using nice promise like thing
this.showError(error);
});
}
clearError() {
this.errorTarget && this.errorTarget.remove();
}
clearResults() {
this.resultItemTargets.forEach((itemElement) => {
itemElement.remove();
});
}
showError() {
const alert =
this.errorTemplateTarget.content.firstElementChild.cloneNode(true);
this.prepend(alert);
}
addResultItem(value) {
const item =
this.itemTemplateTarget.content.firstElementChild.cloneNode(true);
item.innerText = value;
this.resultsTarget.append(item);
}
}
HTML
- 在這里，我們有我們的基本
template元素，可以讓我們為error和item部分設定我們想要的任何 HTML。 - 元素的
template目標名稱以template - 請注意，我們
ul始終在 DOM 中，但:empty如果其中沒有專案，您可以使用 css 默認隱藏它。
<section class="container" data-controller="results"
data-results-url-value="https://myapi">
<template data-results-target="itemTemplate">
<li class="list-group-item" data-results-target="item">__VALUE__</li>
</template>
<template data-results-target="errorTemplate">
<div data-results-target="error" class="alert alert-danger
alert-dismissible fade show" role="alert">
<!-- remember accessibility - use proper titles & role=alert when putting things in DOM -->
<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
<h3>Asset Number Not Valid</h3>
<p>Details about the thing</p>
</div>
</template>
<!-- use css to hide if :empty -->
<ul class="list-group" data-results-target="results">
</ul>
</section>
有用的網址
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template（模板元素）
- https://developer.mozilla.org/en-US/docs/Web/API/Element/prepend（將新元素添加到另一個元素的頂部）
- https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API - 瀏覽器支持替代 axios
- https://developer.mozilla.org/en-US/docs/Web/CSS/:empty - CSS 空選擇器
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/521207.html
標籤：javascripthtml交响乐刺激symfony5.4
上一篇：排序與Doctrine的最大關系