HI All,
Another question related to a CanJS 3 to CanJS 4 migration.
I have a simple appViewModel defined and linked to the router
import DefineMap from 'can-define/map/';
var AppViewModel = DefineMap.extend('AppViewModel',{seal:false},{
// page for routing
page: {
type: 'string',
default: 'dashboard',
},
});
export default new AppViewModel({});
Then the router is
import Construct from 'can-construct';
import route from 'can-route-pushstate';
import appViewModel from './app-viewmodel';
export default Construct.extend({
init: function() {
route.data = appViewModel;
route.register('{page}', {page: 'dashboard'});
route.register('things/{thing}/settings', {page: 'thing_settings'});
route.start();
},
});
I have a component that gets rendered when the route matches “things/{thing}/settings”. Now in the component, I want to load a different thing when the ‘thing’ changes in the appViewModel.
In the controller, i have:
export default Component.extend({
tag: 'page-thing',
events: {
'{appViewModel} thing': function(avm,el,value) {
// refresh the current view
this.viewModel.refresh();
}
},
ViewModel: ViewModel,
view: view
});
In the component viewmodel, i have something like:
import DefineMap from 'can-define/map/';
import appViewModel from 'app/app-viewmodel';
export default DefineMap.extend({seal:false},{
refresh: function() {
.. load data from backend etc ..
},
appViewModel: function() {
return appViewModel;
},
});
In CanJS3, when “thing” changed in the route and the appViewModel, the event triggered in the thing controller and the page was refreshed. In CanJS 4, the event doesn’t trigger, and there is an error message in the console
Potentially unhandled rejection [1] Error: can-event-queue: Unable to bind thing
I tried to change the controller to
events: {
'{appViewModel()} thing': function(avm,el,value) {
// refresh the current view
this.viewModel.refresh();
}
},
But this didn’t work either (event not captured, but no error in the console log now)
I also tried
'{viewModel} appViewModel.thing': function(avm,el,value) {
'{viewModel} appViewModel().thing': function(avm,el,value) {
'{viewModel} appViewModel': function(avm,el,value) {
'{viewModel} appViewModel()': function(avm,el,value) {
These all resulted in no event and no errors.
I also went back to simply using
appViewModel: appViewModel,
in the viewmodel (instead of the function). CanJS3 didn’t like this, which is why I changed to the function, but it doesn’t give an error in CanJS4. This didn’t help.
Any idea how I should listen to events on the appViewModel? The documentation that I can find only talks about using {viewModel} in the component events.
Sorry for pasting code rather than using JS Bin, but we are using StealJS and producing an example running in JS Bin would take some time (I started but gave up)
This is the only major problem, I’ve come across so far, so I consider that the migration is going well!
Cheers
Rob