一位客戶要求我研究 Symfony UX 的Live Components以在內部專案中使用。我們/他們已經遠離了它的 alpha 狀態以及它可能會隨著時間的推移而改變和中斷的事實，因此無需指出這一點。
問題是：我讓一切正常，但 Live 組件就像普通的 Twig 組件一樣，在沒有重繪 頁面的情況下實際上不會互動式更新。我什至從檔案中直接舉了一個例子，試圖讓它運行，但它只是不會更新。是否有熟悉這些組件的人能夠指出我可能做錯了什么？
首先，我在 Composer 中包含了該組件：
"require": {
...
"symfony/ux-live-component": "^2.4",
...
}
package.json還包含所需的東西：
"devDependencies": {
...
"@hotwired/stimulus": "^3.0.0",
"@symfony/stimulus-bridge": "^3.2.0",
"@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets",
...
}
在我的 webpack 配置中啟用了 Stimulus 橋：
Encore.enableStimulusBridge('./assets/controllers.json')
我已經在我的主 JS 檔案中包含了它的引導檔案：
import './bootstrap';
最后我制作了這個組件和模板：
<?php
declare(strict_types=1);
namespace App\Component;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
#[AsLiveComponent('random_number')]
class RandomNumberComponent
{
use DefaultActionTrait;
#[LiveProp(writable: true)]
public int $max = 1000;
public function getRandomNumber(): int
{
return rand(0, $this->max);
}
}
<div {{ attributes }}>
<p>Random number: <strong>{{ this.randomNumber }}</strong></p>
<p>Generating a number between 0 and {{ max }}</p>
<div class="form-group mb-3">
<label>Max</label>
<input class="form-control" type="number" data-model="max">
</div>
<button data-action="live#$render" class="btn btn-primary">Generate a new number!</button>
</div>
單擊按鈕或更改輸入的值無效。當我重繪 頁面時，我確實得到了一個不同的亂數，所以組件本身正在作業，只是異步部分沒有。
我的 javascript 控制臺相當沒用，沒有錯誤或警告，只是來自 Stimulus 本身的一些日志記錄，這似乎表明至少 Stimulus 本身正在按預期作業：
application #starting <stimulus.js:1683>
application #start <stimulus.js:1683>
這里有沒有人對這項新技術足夠熟悉，可以為我指明正確的方向？
uj5u.com熱心網友回復：
今天有這個確切的問題。從您的日志看來，刺激控制器似乎沒有被加載。
確保您的controllers.json檔案包含控制器：
{
"controllers": {
"@symfony/ux-live-component": {
"typed": {
"enabled": true,
"fetch": "eager",
"autoimport": {
"@symfony/ux-live-component/styles/live.css": true
}
}
}
},
"entrypoints": []
}
您bootstrap.js還應包含以下內容：
import { startStimulusApp } from '@symfony/stimulus-bridge';
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
'@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
true,
/\.(j|t)sx?$/
));
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/521199.html
標籤：php交响乐
上一篇：Symfony6.1Doctrine給出錯誤“無法決議類“App\Entity\Officecurrencymax”的列“id”的型別'