These are chat archives for canjs/canjs

4th
Jul 2016
Sunil George
@georgesunil81
Jul 04 2016 03:59
A quick question, how can I listen to change in a particular property on the scope that I am passing to a template?
Sunil George
@georgesunil81
Jul 04 2016 04:00
For example, I have <ax-pag {(pageindex)}="pageNumber"></ax-pag>
where pageNumber is a property on the scope.
Thomas Sieverding
@Bajix
Jul 04 2016 04:01
Your syntax is wrong
Sunil George
@georgesunil81
Jul 04 2016 04:01
I want to listen to any change on pageNumber in my can.control
@Bajix why? I am using the two way bound syntax!
Thomas Sieverding
@Bajix
Jul 04 2016 04:01
Use a can.Component. The .events prop is essentially a can.Control anyway
your casing is wrong
pageIndex should be bound as page-index
kebab casing -> camel casing
Sunil George
@georgesunil81
Jul 04 2016 04:02
So, how do I refer to page-index within my component?
Thomas Sieverding
@Bajix
Jul 04 2016 04:04
var template = require('./pagination-menu.stache!'),
  can = require('can');

require('can/map/define/');

var ViewModel = can.Map.extend({}, {
  define: {
    pageIndex: {
      value: 0,
      type: 'number'
    }
  }
});

can.Component.extend({
  tag: 'pagination-menu',
  leakScope: false,
  template: template,
  viewModel: ViewModel
});
<pagination-menu {(page-index)}="%root.pageIndex"/>
binding pageIndex to can.route there
Sunil George
@georgesunil81
Jul 04 2016 04:05
Hmmm...studying the code ... just a sec...
Thomas Sieverding
@Bajix
Jul 04 2016 04:07
If you’re using done-autorender + it’s can-import as viewModel prop, %root is always the can.route.data map
Useful way for doing indirect state passing
Sunil George
@georgesunil81
Jul 04 2016 04:08
Okay, so how then do I listen to change in the pageIndex property in my can.Control (I want to invoke a function in my can.Control when the component changes the value of pageIndex)?
Thomas Sieverding
@Bajix
Jul 04 2016 04:08
greaty for query building applications
Don’t use a can.Control
can.Component.extend({
  tag: 'pagination-menu',
  leakScope: false,
  template: template,
  viewModel: ViewModel,
  events: {
    '{scope} pageIndex': function( scope, ev, pageIndex ) {

    }
  }
});
Use can.Component + events
Sunil George
@georgesunil81
Jul 04 2016 04:10
So, right now I have a can.Control that builds a scope object (containing property "pageIndex") that I pass to a template having the <pagination-menu...> component!
Thomas Sieverding
@Bajix
Jul 04 2016 04:10
It’ll actually create a can.Control under the hood, but aside from maybe can.view.attr, you really wouldn’t ever want to use can.Control in the wild
Or at least, now that can.Component + done-ssr is a thing
Sunil George
@georgesunil81
Jul 04 2016 04:11
Got it. But, isn't there a way to detect change within the controller just like you have in the component!?
Thomas Sieverding
@Bajix
Jul 04 2016 04:11
They’re identical
So yes
Sunil George
@georgesunil81
Jul 04 2016 04:11
ok, let me try that. Thanks @Bajix
Thomas Sieverding
@Bajix
Jul 04 2016 04:11
If you had this.options.scope as a can.Map, you could do ‘{scope} pageIndex'
Sunil George
@georgesunil81
Jul 04 2016 04:13
I currently have this.scope as a can.Map!
Thomas Sieverding
@Bajix
Jul 04 2016 04:13
nope, should be this.options.scope
Sunil George
@georgesunil81
Jul 04 2016 04:13
Maybe that is why it is not listening in my controller.
Okay, let me make that change.
Thomas Sieverding
@Bajix
Jul 04 2016 04:13
you can reference both, but options gives you the lookup
Sunil George
@georgesunil81
Jul 04 2016 04:15
okay, will try...
var scope = this.scope = this.options.scope = new (can.Map.extend({}))();
I now have it as
Thomas Sieverding
@Bajix
Jul 04 2016 04:16
That works
Sunil George
@georgesunil81
Jul 04 2016 04:17
For some reason, it is still not triggering
'{scope} pageIndex': function( scope, ev, pageIndex ) {
alert('pageIndex changed by the component');
},
That is not getting called when pageIndex is changing on my scope!
Thomas Sieverding
@Bajix
Jul 04 2016 04:18
Probably a timing issue
Sunil George
@georgesunil81
Jul 04 2016 04:18
pageIndex is surely changing on my scope since I see that change in my view!
Thomas Sieverding
@Bajix
Jul 04 2016 04:19
Maybe do this.on
Sunil George
@georgesunil81
Jul 04 2016 04:19
this.on?
Thomas Sieverding
@Bajix
Jul 04 2016 04:19
You’re using a can.Control and not a can.Component?
When you use debugger, can you confirm cross-binding
Sunil George
@georgesunil81
Jul 04 2016 04:20
Correct. I am using a can.Control to render my template (the template makes call to the component)
Let me check the debugger.
Thomas Sieverding
@Bajix
Jul 04 2016 04:20
$(el).scope() does things too
Sunil George
@georgesunil81
Jul 04 2016 04:21
okay
Thomas Sieverding
@Bajix
Jul 04 2016 04:21
useful for pulling up the vm
Sunil George
@georgesunil81
Jul 04 2016 04:21
ok
Dovid Bleier
@dbleier
Jul 04 2016 16:52
@phillipskevin you had mentioned previously https://gitter.im/canjs/canjs?at=5771812c265214c1307dd95f
about importing json
so I created a json file like
[{...},{...},{...}]
and an import statement import jsonTestData from 'menuboard-manager/models/fixtures/test-sign-data.json';
but the jsonTestData object is empty. So what am I missing?
Michael Price
@web-mech
Jul 04 2016 23:01
could anyone tell me why when using async getters with the define plugin, the setter parameter is undefined?
Michael Price
@web-mech
Jul 04 2016 23:10
Screen Shot 2016-07-04 at 7.10.12 PM.png