README

受Laravel Livewire启发，此应用程序为Elefant CMS提供简单的模板扩展，将任何处理器及其视图模板连接到Alpine.js，提供一些有趣的功能

• 初始请求的客户端渲染
• 将Elefant的{{var}}标签转换为Alpine.js的<span x-text="var">标签
• 通过一些自定义模板标签提供自动的服务器端回调

安装

通过composer

composer require elefant/app-wires

用法

以下是它的工作方式

在你的处理器中（apps/myapp/handlers/example.php）

<?php

// Initialize and inject the controller
Wires::init ($this);

// Set your default values here
$defaults = [
	'fname' => 'First',
	'lname' => 'Last'
];

// Handle the request, providing an API callback handler
echo Wires::handle ($defaults, function ($response) {
	// Process API requests here
});

然后在你的配套视图模板中（apps/myapp/views/example.html）

<div {{_wire_}}>
	<p>{{lname}}, {{fname}}</p>
	
	<p>
		<button {{_wire_button_}} data-fname="John" data-lname="Doe">Doe, John</button>
		<button {{_wire_button_}} data-fname="First" data-lname="Last">Reset</button>
	</p>
</div>

或者，你可以在返回之前在服务器端修改响应数据

echo Wires::handle ($defaults, function ($response) {
	$response['fname'] = 'Jane';
	$response['lname'] = 'Doe';
	return $response;
});

如果服务器出现错误，你可以使用

echo Wires::handle ($defaults, function ($response) {
	return Wires::error (500, 'Nope');
});

在幕后，<div {{_wire_}}>将Alpine.js连接到模板数据。

如果你想要定义用于Alpine.js的自定义函数，你可以使用{{_wire_data_}}标签来初始化组件，而不是这样

<div x-data="myComponent()">
	<p x-text="name()"></p>
</div>

<script>
function myComponent() {
	return Object.assign ({{_wire_data_}}, {
		name() {
			return this.fname + ' ' + this.lname;
		}
	});
}
</script>

除了{{_wire_}}和{{_wire_data_}}之外，还可以使用三个自定义标签将按钮、输入和链接连接到同一个端点进行API调用

• {{_wire_button_}} - 连接一个<button>元素，将它的data-*属性传递到服务器。
• {{_wire_input_}} - 连接一个<input>、<select>或<textarea>元素，将你键入或选择的实时更新发送到服务器，将它的name属性和值传递到服务器。
• {{_wire_link_}} - 连接一个<a>链接，将它的data-*属性传递到服务器。

Alpine.js的其他功能也应该以相同的方式工作，尽管循环应该使用纯Alpine.js而不是Elefant的模板语法。例如

$default = [
	'list' => ['One', 'Two', 'Three']
];

可以连接如下

<ul>
	<template x-for="item in list">
		<li x-text="item"></li>
	</template>
</ul>

在客户端或服务器上修改列表将更新显示的元素列表。

便利方法

Wires定义了两个额外的便利方法，用于与服务器通信

• this.sync() - 将组件的当前状态发布到服务器端处理器。
• this.send(params) - 将指定的请求数据发布到服务器端处理器。

第一个序列化和发送整个组件状态，而第二个只发送它给出的特定数据。

这些可以用于在本地修改后，将更新的组件状态发送到服务器进行存储和进一步处理。

示例用法

function toDoList() {
	return Object.assign ({{_wire_data_}}, {
		toggleToDoCompleted(index) {
			this.todos[index].completed = !this.todos[index].completed;
			this.sync(); // Send updated state to the server
		}
	});
}

使用this.send(params)，你还可以仅发送更改的项目，你还需要在服务器端检查它。

function toDoList() {
	return Object.assign ({{_wire_data_}}, {
		toggleToDoCompleted(index) {
			this.todos[index].completed = !this.todos[index].completed;
			this.send({updated: index, todo: this.todos[index]});
		}
	});
}

演示

安装此应用程序后，请转到Elefant CMS安装中的/wires/demos，以管理员身份登录，查看一些工作演示。

您可以在Elefant CMS安装下的apps/wires/handlers/demos和apps/wires/views/demos目录中检查演示的源代码，具体链接如下：