These are chat archives for canjs/canjs

5th
Oct 2016
Adam L Barrett
@BigAB
Oct 05 2016 03:18
canjs/can-compute#35
Eben
@eben-roux
Oct 05 2016 15:38
silly question: how do I bind a function on my view model to a click on a component: http://jsbin.com/yakonu/1/edit?html,js,output
Kevin Phillips
@phillipskevin
Oct 05 2016 15:40
you want ($click)
the $ indicates its a DOM event
Eben
@eben-roux
Oct 05 2016 15:41
pffft... I know that :) --- thanks, sometimes making a simple jsbin makes things easier to digest
of course... it worked
Kevin Phillips
@phillipskevin
Oct 05 2016 15:41
yeah, sometimes making a simple example really helps
Eben
@eben-roux
Oct 05 2016 15:43
is there a way to bind a click to a helper?
Kevin Phillips
@phillipskevin
Oct 05 2016 15:43
yeah
same way
Eben
@eben-roux
Oct 05 2016 15:43
mmm... must be a context issue then
Kevin Phillips
@phillipskevin
Oct 05 2016 15:44
we tried to make this more clear in the 3.0 docs
Eben
@eben-roux
Oct 05 2016 15:44
I have a table component:
      {{#each rows}}
      <tr class="{{rowClass .}}" ($click)="rowClick">
        {{#columns}}
          <td data-title="{{i18n columnTitle}}">
            {{#switch columnType}}
              {{#case 'button'}}
                <sentinel-button class-type="btn-default buttonClass" ($click)="{{buttonClick}}" text="{{buttonTitle}}" />
              {{/case}}
              {{#case 'remove-button'}}
                <sentinel-remove-button (click)="{{buttonClick}}" text="remove" />
            {{/case}}
            {{#case 'template'}}
            {{template ../. .}}
            {{/case}}
            {{#default}}
            {{columnValue ../. .}}
            {{/default}}
            {{/switch}}
          </td>
        {{/columns}}
      </tr>
      {{/each}}
Kevin Phillips
@phillipskevin
Oct 05 2016 15:44
you don’t need {{ around buttonClick
Eben
@eben-roux
Oct 05 2016 15:46
well... buttonClick contains the actual method... seems to work but I'll try
anyway, the rowClick result in this: WARN: can/view/bindings: ($click) couldn't find method named rowClick Object {element: tr, scope: Scope}
Kevin Phillips
@phillipskevin
Oct 05 2016 15:47
ok
Eben
@eben-roux
Oct 05 2016 15:47
the component has this helper:
        rowClick(row) {
            if (!this.attr('rowClick')) {
                return;
            }

            this.attr('rowClick').call(this, row);
        }
Kevin Phillips
@phillipskevin
Oct 05 2016 15:48
can you show more of the component code?
Eben
@eben-roux
Oct 05 2016 15:50
can I point you to my github code?
I'll commit...
Kevin Phillips
@phillipskevin
Oct 05 2016 15:50
sure
Eben
@eben-roux
Oct 05 2016 15:53
btw... removing the braces around the button click on the sentinel-button didn't fire the event... but on the sentinel-remove-button it was fine... need to look at the component code since there is probably something different there
it is the table.js and friend table.stache
Kevin Phillips
@phillipskevin
Oct 05 2016 15:57
so rowClick never gets called?
Eben
@eben-roux
Oct 05 2016 15:59
nope... that WARN logs to the console
Kevin Phillips
@phillipskevin
Oct 05 2016 16:00
there’s a warning and the code doesn’t work though, right?
Eben
@eben-roux
Oct 05 2016 16:00
correct
perhaps I should put a jsbin together that replicates the scenario... thought maybe someone may see something obvious that I am doing wrong
I have a sneaky suspicion that the call is being made to the row instance and not the helper
Kevin Phillips
@phillipskevin
Oct 05 2016 16:01
you could try ($click)="../rowClick(.)”
Eben
@eben-roux
Oct 05 2016 16:01
ah!
Kevin Phillips
@phillipskevin
Oct 05 2016 16:01
but you shouldn’t have to
Eben
@eben-roux
Oct 05 2016 16:02
nope... same WARN
Kevin Phillips
@phillipskevin
Oct 05 2016 16:03
I’m not sure
can’t see anything wrong with it
Eben
@eben-roux
Oct 05 2016 16:03
while you're around... when I do get it working
how do I prevent the click from bubbling up from sub-components
Kevin Phillips
@phillipskevin
Oct 05 2016 16:04
you can pass in the event
Eben
@eben-roux
Oct 05 2016 16:04
so, in the <tr> I may have a button and I want to respond to the button click... but that also results in the click on the <tr> which I don't want
oh, and then just cancel it
Kevin Phillips
@phillipskevin
Oct 05 2016 16:05
($click)="../rowClick(., %event)”
Eben
@eben-roux
Oct 05 2016 16:05
beautiful
Kevin Phillips
@phillipskevin
Oct 05 2016 16:05
and just stopPropagation
Eben
@eben-roux
Oct 05 2016 16:05
great, thanks
Kevin Phillips
@phillipskevin
Oct 05 2016 16:05
no problem
Eben
@eben-roux
Oct 05 2016 16:05
let me create a jsbin for my issue and I'll come by here again for some help... perhaps you'll still be around
Eben
@eben-roux
Oct 05 2016 16:19
Eben
@eben-roux
Oct 05 2016 17:55
got it working by removing the helper
the call, in my case, is made to the row map and I delegate it to the view model... will commit to github later
Omung Goyal
@OmungGoyal_twitter
Oct 05 2016 18:02

I have a question related to canjs define property.

If the property is already been set. And if I use that property without changing its value, will it go through its get function?

isValid: {
get: function(){
return this.attr('validated');
}
}

validated:{
get: function(){
return true;
}
}

'validated' has already been set. Will it go through its get function again when I call isValid property?

Omung Goyal
@OmungGoyal_twitter
Oct 05 2016 18:13
In my case, I want to check the value of 'validated' property every time it has been used.
Kevin Phillips
@phillipskevin
Oct 05 2016 18:32
it will cache the value unless validated changes
Omung Goyal
@OmungGoyal_twitter
Oct 05 2016 18:39
Is there anyway to invalidate the cache or empty it?
Kevin Phillips
@phillipskevin
Oct 05 2016 18:39
why do you want to?
the cache should always have the correct value