Require module and updates its view from another module

[pietrofxq]

I'm still a begginer in durandal. I have read through the documentation but i couldn't find a way to do what i can (maybe i'm missing something).

The problem is the following:

I have one module ('dashboard.js') and inside its view ('dashboard.html'). In my application, there's a global player (like soundcloud). In the dashboard view, there is a list of song where i can press play. The ideia is that when you press play in a song in dashboard, the song object is sent to the player module so I can update the player view with the new song and have the song object available on the player module so I can work with it.

Here's what I'm tried to do, with no success:

Dashboard.html (snippet)

<li class="song">
 <div class="play-button" data-bind="click: $root.play">
  <span class="glyphicons play"></span>
  </div>
</li>

Dashboard.js (snippet)

define(['knockout', 'player'], function(ko, player) {


function vm() {
  ...
  self.play = function(song) {
   player.currentSong(song)
  }
}


return vm;
})

Player.html (snippet)

<p class="song-name" data-bind="text: songName">

Player.js (snippet)

define(['knockout'], function(ko) {
  var vm = {
   currentSong: ko.observable(),
   songName: ko.observable()
  }


  vm.currentSong.subscribe(function(song) {
   vm.songName('New song name') //testing purposes
  })


return vm;
})

What I expected is that the player view updated the <p> to be 'New song name' when currentSong changes.

Inside dashboard.js I can see that player.currentSong() is indeed the new song object, but nothing happens in the view.

What am I doing wrong?

[Garry Taylor]

There is a possibility that the Knockout subscribe is not being called as this is being triggered from another module (the Daskboard.js)

You should manually update the Player.songName within the Player.play method. As you know the Player is updating and playing the right/selected song.

Personally I would user Durnadal's Pub/Sub for this as events will mean that you are not tightly coupling your modules together. Linking two (or more) views together will bit you in the future.

http://durandaljs.com/documentation/Leveraging-Publish-Subscribe.html

If you don't want to use Pub/Sub try including the Durandal Observable plugin, it may work better when linking views/controllers together.

http://durandaljs.com/documentation/Binding-Plain-Javascript-Objects.html

It's odd that the currentSong is updated but the songName is not; this is more of a Knockout problem than a Durandal one.