Durandal requiring viewmodel from shell

Question

In my app, I have a global player. In the shell module, I require the viewmodel of the player because I want to know if the player is playing, and if so, I add a class to container of the app (which is in the shell).

The problem is that I also need to require the shell from the player VM, because there are some functions that I use across the app that are in the shell.

But when requiring the player module from the shell, requiring the shell from the player returns undefined. If I don't require the player, the shell is passed normally.

shell.js

define(['viewmodels/player'], function(player) {
 return {
  player: player
 }
})

player.js

define(['viewmodels/shell'], function(shell) {
 console.log('shell:', shell) // undefined
})

I don't have any ideia of what's going on.

That, indeed, will create circular dependencies, and break require! See my answer below! — Samuel Pinto, Aug 29 '15 at 00:35

score 0 · Answer 1 · answered Aug 11 '15 at 20:57

Hm! I think I we had this problem once. They way it happens is require checks what's need by shell. Then it sees player module and goes to fix that, and inside that you requuire shell. Circular reference. We did solve it though.

We did like this, I'm writing psuedo code but you should be able to try this.

There are lots of ways, this is one easy way to do it. Open your player and do like this.

 var shell = require('shell'); //using this style to work around circular reference

score 0 · Answer 2 · answered Aug 29 '15 at 00:47

I will try to help with some implementation alternatives!

1º! player could be a service (singleton), and be required in bouth viewmodes,

// app/services/player.js
require([], function(){/*Player*/});

// shell
require(['services/player'], function(player){/* SHEll */});

// ohter view
require(['services/player'], function(player){/* other view*/});

2º You can use pub/sub pattern! Durandal has a support for that!

// Alert that play has been clicked
app.trigger('player:play');

// subscribe play
app.on('player:play', doSomething);

// deactivate subscription
app.off('player:play', doSomething);

Check documentation!

Booth work just fine and with low coupling...

Durandal requiring viewmodel from shell

2 Answers2