Changing route from viewmodel

1

In my applicaiton, in the stache templates I’ve been using routeUrl to change the application page. This works fine. I’ve got some D3js diagrams and clicking on stuff is supposed to change the page. However due to a bug I raised in can-route-pushstate

https://github.com/canjs/can-route-pushstate/issues/81

I cannot use routeUrl. Therefore, I capture the click event and then try to change the page from within the viewmodel like this.

appViewModel.assign({page:'service_schedule', transponder:transponderId});

Now, this works, but it generates a warning.

“appViewModel” is being called as a function. This will not happen automatically in an upcoming release. You should call it explicitly using “appViewModel()”.

I’m not sure if it cleans up the route nicely (as does routeUrl).

So my question. Is there a better way to change the route from the viewmodel (that would avoid this warning) and clean up the route like routeUrl.

I really like the warnings that are generated in canjs 3. They really help to avoid errors. The only problem is that sometimes it is difficult to work out what is actually causing the warning.

Cheers
Rob

2 
appViewModel.assign({page:'service_schedule', transponder:transponderId});

Generates this warning? This is a stache warning, so it’s not this alone that causes the warning I think.

Can you include the stack of the error?

3

We are currently using can-stache 3.14.11

can-log.js:97 "appViewModel" is being called as a function.
	This will not happen automatically in an upcoming release.
	You should call it explicitly using "appViewModel()".

exports._logger @ can-log.js:97
exports.warn @ can-log.js:38
warn @ dev.js:68
showWarning @ can-stache-key.js:157
read @ can-stache-key.js:188
readValue @ can-stache-key.js:30
read @ can-stache-key.js:103
(anonymous) @ can-control.js:165
(anonymous) @ can-control.js:149
start @ can-observation.js:268
_on @ proto-compute.js:151
(anonymous) @ proto-compute.js:331
(anonymous) @ can-observation.js:589
prototype.addEventListener @ lifecycle.js:31
addEventListener @ can-compute.js:49
_action @ can-control.js:220
_action @ control.js:45
on @ can-control.js:346
setup @ can-control.js:323
setup @ control.js:55
newInstance @ can-construct.js:288
init @ can-construct.js:636
Constructor @ VM206351:3
setup @ can-component.js:310
newInstance @ can-construct.js:288
init @ can-construct.js:636
Constructor @ VM206351:3
(anonymous) @ can-component.js:225
(anonymous) @ can-observation.js:589
tagHandler @ can-view-callbacks.js:118
(anonymous) @ can-stache.js:281
hydrateCallbacks @ can-view-target.js:257
hydrate @ can-view-target.js:276
rendererWithScope @ utils.js:60
convertedRenderer @ utils.js:76
(anonymous) @ can-observation.js:589
case @ core.js:357
(anonymous) @ call.js:83
start @ can-observation.js:268
_on @ proto-compute.js:151
(anonymous) @ proto-compute.js:331
(anonymous) @ can-observation.js:589
prototype.addEventListener @ lifecycle.js:31
(anonymous) @ proto-compute.js:533
(anonymous) @ observe.js:23
Observation.temporarilyBind @ can-observation.js:685
Call.value @ call.js:87
makeEvaluator @ mustache_core.js:80
branchRenderer @ mustache_core.js:325
HTMLSection.targetCallback @ html_section.js:120
hydrateCallbacks @ can-view-target.js:257
hydrate @ can-view-target.js:276
rendererWithScope @ utils.js:60
convertedRenderer @ utils.js:76
(anonymous) @ can-observation.js:589
fn @ core.js:366
(anonymous) @ call.js:83
start @ can-observation.js:268
update @ can-observation.js:232
Observation.updateAndNotify @ can-observation.js:409
dispatchSync @ can-event.js:184
flush @ batch.js:331
stop @ batch.js:284
assign @ map.js:32
assign @ map.js:323
linkTransponder @ panel-satellite-frequencyplan-beam-viewmodel.js:247
transponderClick @ panel-satellite-frequencyplan-beam.js:35
(anonymous) @ can-control.js:110
handleEvent @ delegate.js:90
4

The stack trace doesn’t help me. Could we pair tomorrow?

5

Hi Justin,

I have a meeting with a customer all day today so unfortunately I’m not available. Here is some code from the application. First the AppViewModel

import DefineMap from 'can-define/map/';

var AppViewModel = DefineMap.extend(
  'AppViewModel', { seal:false },
  {
    id: 'string',
    name: 'string',
    page: {
      type: 'string',
      value: 'dashboard',
    },
});

export default new AppViewModel({});

And the component viewmodel where I try to change page using the appViewModel.assign

import DefineMap from 'can-define/map/';
import appViewModel from 'app/app-viewmodel';

export default DefineMap.extend(
  {
    seal:false  // for svg
  },
  {

    // removed some code here

    // handle the click on the transponder shape
    linkTransponder: function(transponderId) {
      appViewModel.assign({page:'service_schedule',transponder:transponderId});
    },

    appViewModel: function() {
      return appViewModel;
    },

    appViewModelProperty: function(property) {
      return appViewModel[property];
    },

  });

}

That’s it really. The last function appViewModelProperty is so I can find out the properties on the route in the stache template using

satellite=scope.root.appViewModelProperty('satellite')

Previsously I tried

satellite=scope.root.appViewModel().satellite'

But this also seemed to generate a similar error about calling appViewModel as a function

Thanks in advance. I’m available all day on monday next week.

Rob