Actions
The magic sauce. Actions are typically invoked from user interactions and can update our data properties.
Actions are methods in your components invoked when a user interaction occurs. You define when actions are invoked in your Templates using Directives. Once CBWIRE invokes the action, your component's template is re-rendered and returned via XHR.
component extends="cbwire.model.Component"{
property name="taskService" inject="[email protected]";
// Data property
data = {
"task": ""
};
// Action
function addTask(){
taskService.create( data.task );
// Clear our task
data.task = "";
}
}
<!--- Template --->
<div>
<div><input wire:model="task" type="text"></div>
<button wire:click="addTask">Add Task</button>
</div>
Actions shouldn't return any value. Returned values are ignored.

Passing Parameters

You can pass parameters to your actions, such as here using addTask('Some Task').
<button wire:click="addTask('Some Task')">Add Task</button>
The parameter is then passed through to your Component Action via function arguments.
// Action
function addTask( taskName ){
taskService.create( data.task, taskName );
// Clear our task
data.task = "";
}
Export as PDF
Copy link