These are chat archives for canjs/canjs

24th
Apr 2015
Ilya Fadeev
@ilyavf
Apr 24 2015 18:26

hey guys, how can i observe changes on a single value that gets passed into my component through template:

mySortDir = can.compute("asc");

<grid sortdir={mySortDir} rows={myRows}></grid>
Grid = Component.extend({
scope: {
rows: [],
sortdir: 'desc'
},
events: {
'{sortdir} change': function(){ / do sorting / }
}
})

mySortDir("desc");

Matthew Phillips
@matthewp
Apr 24 2015 18:27
'{scope} sortdir': function(){}
James Atherton
@James0x57
Apr 24 2015 18:27
ohhh
Ilya Fadeev
@ilyavf
Apr 24 2015 18:27
waw! will try
Matthew Phillips
@matthewp
Apr 24 2015 18:27
well
actually
"{viewModel} sortdir"
:)
Ilya Fadeev
@ilyavf
Apr 24 2015 18:27
but, mySortDir is a computed
Matthew Phillips
@matthewp
Apr 24 2015 18:27
depending on which version of can
Ilya Fadeev
@ilyavf
Apr 24 2015 18:27
2.2.5
Chris Gomez
@akagomez
Apr 24 2015 18:27
The comparator needs to be a property of the can.List.
So you’d do…
mySortDir = myRows.attr(‘comparator’)
Or…
<grid sortdir=“myRows.comparator” …>
@ilyavf Make sense?
Gr…
sortdir=“{myRows.comparator}"
Ilya Fadeev
@ilyavf
Apr 24 2015 18:32
actually, my question was more generic - how to trigger an action on a computed passed to a component
Chris Gomez
@akagomez
Apr 24 2015 18:32
Oh, I see.
Well, just so you know. Changing the comparator will… / do sorting /.
Matthew Phillips
@matthewp
Apr 24 2015 18:39
@ilyavf was your question not about the events?
Ilya Fadeev
@ilyavf
Apr 24 2015 18:41

@matthewp Thanks, it works. The next case: if my action depends on two observables. How would i trigger it only once if both changed at the same time:

mySortDir = can.compute("asc");
mySortKey = can.compute("column1");

<grid sortdir={mySortDir} sortKey={mySortKey} rows={myRows}></grid>
Grid = Component.extend({
scope: {
rows: [],
sortKey: '',
sortdir: 'desc'
},
events: {
'{scope} sortdir': function(){ / do sorting / },
'{scope} sortKey': function(){ / do sorting / }
}
})
can.batch.start();
mySortDir("desc");
mySortKey("column2");
can.batch.stop();

// This still causes the function to be called twice.

mySortDir = can.compute("asc");
mySortKey = can.compute("column1");

<grid sortdir={mySortDir} sortKey={mySortKey} rows={myRows}></grid>
Grid = Component.extend({
    scope: {
        rows: [],
        sortKey: '',
        sortdir: 'desc'
    },
    events: {
        '{scope} sortdir': function(){  /* do sorting */ },
        '{scope} sortKey': function(){  /* do sorting */ }
    }
})
can.batch.start();
mySortDir("desc");
mySortKey("column2");
can.batch.stop();
Chris Gomez
@akagomez
Apr 24 2015 18:44
You’ll have to check ev.batchNum.
Matthew Phillips
@matthewp
Apr 24 2015 18:44
beat me to it
Chris Gomez
@akagomez
Apr 24 2015 18:45
if (!ev.batchNum || ev.batchNum !== this._lastBatchNum) { /* sort */ }
Ilya Fadeev
@ilyavf
Apr 24 2015 18:51
@akagomez thank you! so, batch.start/stop does not buffer the events, but provides a butchNumber for to act as I want?
Matthew Phillips
@matthewp
Apr 24 2015 18:53
it does buffer them, but still calls them all
it doesn't combine them into 1 event
Ilya Fadeev
@ilyavf
Apr 24 2015 18:57
i see, thank you
dylanrtt
@dylanrtt
Apr 24 2015 19:01
what if you change the same property multiple times? does it just call it once at the end of the batch?
Ilya Fadeev
@ilyavf
Apr 24 2015 19:14
@dylanrtt I just checked: it does call it once for the computed property.
@dylanrtt however, if its a list, and lets say you remove an item and add a new one, then it gets called twice.
Chris Gomez
@akagomez
Apr 24 2015 19:29
@dylanrtt For map properties, it fires an event for each change. http://jsfiddle.net/akagomez/sbpb3fnv/
I’m a little confused now though, since I can’t figure out why I’m not getting “change” events for defined properties (in that demo).
@matthewp @daffl What am I doing wrong there?
Chris Gomez
@akagomez
Apr 24 2015 19:36
Okay, I updated the Fiddle. It seems having/not having a set/get function changes the behavior of the property.
Even if those methods simply set/get.
Chris Gomez
@akagomez
Apr 24 2015 20:13
@justinbmeyer Can you help me understand why events are fired differently in these 3 examples? http://jsfiddle.net/akagomez/sbpb3fnv/