如何使用Hotwire与codeigniter？

m4pnthwp 于 8个月前发布在其他

关注(0)|答案(1)|浏览(46)

最初，当我看到有人使用livewire时，我对livewire很感兴趣。但事实证明，经过我的检查，livewire只能在Laravel上运行。同时，我自己只使用了代码点火器。然后，我寻找一个替代品，它遇到了我与热线。我一直在阅读关于hotwire的文章，但我还没有找到一个在code igniter中使用它的指南。可以在Code Igniter 3中使用hotwire吗？如果可能话，怎么做？你能给予我举个例子吗？

codeigniter

来源：https://stackoverflow.com/questions/76832738/how-to-use-hotwire-with-codeigniter

1条答案

按热度按时间

w3nuxt5m1#

是的，可以在CodeIgniter 3中使用Hotwire。然而，目前还没有官方指南，但这并不意味着你不能这样做！
安装Turbo和Stimulus软件包：

composer require hotwired/turbo
composer require hotwired/stimulus

为Hotwire组件创建一个新的控制器和动作。举例来说：

class Home extends CI_Controller
{
    public function index()
    {
        $this->load->view('home');
    }
}

为Hotwire元件创建新的视图文件。举例来说：

<html>
<head>
    <title>Hotwire Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stimulus/2.9.0/stimulus.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stimulus-loading/1.1.2/stimulus-loading.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Hotwire Demo</h1>
        <input type="text" data-target="my-input">
        <p data-target="my-output"></p>
    </div>
    <script>
        $(document).on('turbolinks:load', function() {
            new StimulusReflex('my-input', {
                action: function(event) {
                    const output = document.querySelector('[data-target="my-output"]');
                    output.textContent = event.target.value;
                }
            });
        });
    </script>
</body>
</html>

在控制器操作中，添加以下代码以初始化Turbo：

$this->turbo->init();

您现在应该可以使用Hotwire。下面是一个简单的Hotwire组件的示例，当输入元素的值更改时，该组件会更新<p>元素的值：

<input type="text" data-target="my-input">
<p data-target="my-output"></p>

data-target属性指定将处理事件的Stimulus控制器的名称。在这种情况下，控制器称为my-input。
StimulusReflex构造函数接受两个参数：控制器的名称和定义控制器将处理的操作的对象。在这种情况下，操作被称为action，它接受一个事件对象作为其参数。
event对象包含有关触发操作的事件的信息，例如被单击的元素的名称和input元素的值。
在此示例中，action函数仅更新
元素与输入元素的值。
希望这对你有帮助！

赞(0）回复(0）举报 8个月前

我来回答

如何使用Hotwire与codeigniter？

1条答案

相关问题

热门标签

最新问答