Help understanding code

DoneJS
1

I was reading this: https://donejs.com/Features.html#custom-html-elements + https://jsbin.com/xutupo/2/edit?html,output and got really curious about the code in there:

<order-model get-list="{ period='previous_week' }" value:to="*previousWeek" />
<order-model get-list="{ period='current_week' }" value:to="*currentWeek" />

<bit-c3>
  <bit-c3-data>
    <bit-c3-data-column key="Last Week" value:from="*previousWeek.totals" />
    <bit-c3-data-column key="This Week" value:from="*currentWeek.totals" />
  </bit-c3-data>
</bit-c3>

There were two things I couldn’t quite understand:

  1. get-list="{ period='previous_week' }" what is get-list and what is that strange syntax on the right side? is it an object? if so does it mean I could have my-function-name="{ param1=this.var1 param2=this.var2}"?
  2. the use of * in the binding: I think it was previously explained to me that it had to do with some sort of “temporal” element to connect both the order-model with bit-c3-data-column without using a real property. There is an explanation here https://canjs.com/doc/can-stache-bindings.reference.html#Use but still I barely understand how to use it and its benefits.

Thanks

2

Hi @nriesco, sorry it took so long to get a response!

  1. get-list is something special to can-connect, so it’s not a thing you can use elsewhere. You can see its code here: https://github.com/canjs/can-connect/blob/6ebbf416eb3e1c58475e9971c557b9e937970328/can/tag/tag.js#L74

You can use hash expressions to make something like on:click="myFunction(param1=var1 param2=var2)" call myFunction({param1: var1, param2: var2})

  1. * (in CanJS 3) can be used to take a value from a child component and make it usable elsewhere in the template. You can always do that by creating a property in the template for the view model, but with * you don’t have to create that extra property. These docs have a little more info: https://canjs.com/doc/can-stache-bindings.toParent.html#ExportingViewModelproperties

We’re deprecating the * syntax in CanJS 4 so that it’s more clear what’s going on. You can start using scope.vars to accomplish the same thing in can-stache 3.11+

Hope that helps,
Chasen

3

Thanks a lot @chasen

Just to be sure, this <order-model get-list="{ period='previous_week' }" value:to="*previousWeek" /> is equivalent to have a getter in the viewmodel that calls the getList method (returns a Promise) with params defined as { period='previous_week' } ?

4

Yup, that seems right to me!