The CBWire + Alpine Demo

@gcopley Hi Grant, I had downloaded the repo for this demo ( from your GitHub site.

I had placed the files in a test server I have and I encountered a couple of issues.

  1. 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”, []);

function complete() {
    this.emit( "completeTask", []);

function reopen(){
    this.emit( "reopenTask", []);

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() {

// cbwire looks for "postUpdate[PropertyName]" and fires after the property is updated.
function postUpdateTask() {

// Add a task
function addTask() {

    if ( len( data.error ) ){

    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 != 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 == taskId;
    } );

    if ( arrayLen( match ) == 1 ) {
        match[ 1 ].complete = isCompleted;


@webguy The problem is yours truly here back in early 2022 tagged the bleeding version of cbwire (cbwire@be) in box.json when I created that demo. So it’s trying to run the older app with the latest version of CBWIRE, and a lot has changed since then.

Unfortunately when I tried to downgrade the version back to cbwire@1.2, it seems those are no longer available on ForgeBox. I’m not sure why.

I’ve gone through and updated the app to use the most recent version of CBWIRE and I’ve made sure to specify a specific CBWIRE version instead of @be so that this doesn’t happen in the future.

Here’s what you’ll need to do locally to get those changes pulled in.

git checkout main
git pull
box install --force
server start

Please let me know how it goes.

@gcopley Thank you! This works like the demo now. I appreciate the quick response!

Here’s the box.json file I’m using for reference:


1 Like