@gcopley Hi Grant, I had downloaded the repo for this demo (https://cfcasts.com/series/ortus-webinars-2022/videos/grant-copley-on-cbwire-+-alpine_js) from your GitHub site.
I had placed the files in a test server I have and I encountered a couple of issues.
- The emit functions (remove, complete, and reopen) were throwing an error saying that an array was expected.
The wires/task.cfc file has them as structs in the repo.
I updated to:
function remove() {
this.emit( “removeTask”, [data.task.id]);
}
function complete() {
this.emit( "completeTask", [data.task.id]);
}
function reopen(){
this.emit( "reopenTask", [data.task.id]);
}
That solved issue #1.
The second issue is harder for me to figure out.
In the video when you click the Add button to add a task, the number of tasks updates immediately to 1. However, on my test server with the repo files, it will only update after I start to type in the text box.
Can you shed light on the issue? I’ve been trying to figure it out, but I have had no wins on it.
Thank you!
Here’s the wires/taskList.cfc file I’m using:
component extends=“cbwire.models.Component” {
// Data Properties
data = {
"tasks": [],
"task": "",
"error": ""
};
// Event Listeners
listeners = {
"removeTask": "removeTask",
"completeTask": "completeTask",
"reopenTask": "reopenTask"
};
// Computed Properties
computed = {
"taskCounter": function() {
return arrayLen( data.tasks );
},
"completeCounter": function() {
var completedTasks = data.tasks.filter( function( task ){
return task.complete == true;
} );
return arrayLen( completedTasks );
},
"preventAdd": function(){
return len( data.error ) || !len( data.task );
}
}
// Validations for our TaskList
function validate(){
this.setError( len( data.task ) ? "" : "Please enter something else." );
}
// Runs once when our TaskList is first rendered.
function mount() {
validate();
}
// cbwire looks for "postUpdate[PropertyName]" and fires after the property is updated.
function postUpdateTask() {
validate();
}
// Add a task
function addTask() {
validate();
if ( len( data.error ) ){
return;
}
data.tasks.append( {
"id": createUUID(),
"name": data.task,
"complete": false
} );
data.task = "";
}
// Remove a task
function removeTask( taskId ) {
data.tasks = data.tasks.filter( function( checkTask ) {
return checkTask.id != taskId;
} );
}
// Complete a task
function completeTask( taskId ) {
flagTask( taskId=taskId, isCompleted=true );
}
// Remove all tasks
function removeAll() {
data.tasks = [];
}
// Reopen a completed task
function reopenTask( taskId ) {
flagTask( taskId=taskId, isCompleted=false );
}
// Flag is task either completed or not
function flagTask( taskId, isCompleted ) {
var match = data.tasks.filter( function( checkTask ) {
return checkTask.id == taskId;
} );
if ( arrayLen( match ) == 1 ) {
match[ 1 ].complete = isCompleted;
}
}
}