CBWire and prc scope

Box Modules CBWIRE
1

I’m trying to rewrite an app using CBWire this time and, after a smooth start, it seems I’ve reached a point where I’m not sure how to move forward. I have a select dropdown that loops over a query in the prc scope to determine the options (i.e. it’s populated dynamically with a cfquery).

I’m trying to bind the select value with wire:model. However, after any update to the page from other wire events the prc scope is undefined. It seems to only work when the page initially loads. Clearly I’m crossing coldbox and cbwire streams that aren’t meant to be crossed. Binding the select value works great if I have static options, but I need to populate it dynamically. The prc and args scopes coming from the handler that I’m used to using in regular coldbox apps don’t seem to be the answer. What am I missing?

2

Also, I tried the onMount lifecycle event to populate the prc scope just for fun and have the same problem. So, to put it another way, I’m not sure how to get dynamic data to persist on the page.

3

Usually if there is something in PRC that you want to reuse on subsequent cbwire requests the only time you will be able to access PRC is in the initial onMount() event that runs the first time the wire is mounted on the page.

I think what you may be missing is that you need to move anything you want to use in PRC over into your data properties. the data properties can only store values JavaScript understands, so no CF objects, or anything too fancy.

Assuming the prc query is named “prc.myQuery”, is in standard cfquery format, has a column named “value”, and has a column named “label” you would want something like this for your onMount()

function onMount( event, rc, prc, params ){
    data.myInputValues = [];
    for( var inputData IN prc.myQuery ){
        data.myInputValues.append( { "value" : inputData.value, "label" : inputData.label } );
    }
}

Then in your template html/cfml you can access the data.myInputValues array to build the select input and bind the selected value to data.myOtherDataProperty by using wire:model="myOtherDataProperty" 

<select wire:model="myOtherDataProperty" >
    <cfloop index="currentIndex" item="currentItem" array="#myInputValues#"> 
        <option value="#currentItem.value#">#currentItem.label#</option>
    </cfloop>
</select>

I hope this helps!

1 Like
4

This is extremely helpful. I’m still making the mental shift to working with CBWire. Half of my brain is still in regular coldbox land. I’m going to give this a shot. Plus it sparked another idea as well. I’ll update the thread with the results. Thanks!

2 Likes
5

Great, glad to help! :+1:

6

This worked brilliantly. And now more of my brain has shifted over to cbwire land. It’s starting to click more and more. Again, I appreciate your reply immensely.

1 Like
7

@joechastain Glad I could help! CBWire is great, I find myself using it more and more. I can’t thank @gcopley enough for all his hard work on it.

2 Likes
8

I couldn’t have explained it better @MikeR :smiley:

@joechastain As Mike explained, the PRC scope is only available to the onMount() lifecycle method, so subsequent requests won’t be able to access it. You’ll want to store data in your data properties, which will persist across subsequent updates to the component.

1 Like
9

@MikeR @joechastain

I’ve added a note for this in the docs. https://cbwire.ortusbooks.com/essentials/lifecycle-events#onmount

10

@gcopley Awesome, great idea.

11

Excellent addition to the docs. Thank you @gcopley. Been really enjoying learning CBWire.

1 Like