O'Reilly logo

Cross-platform Desktop Application Development: Electron, Node, NW.js, and React by Dmitry Sheiko

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The title bar path module

So we have a directory and file lists responding to the navigation event, but the current path in the title bar is still not affected. To fix it, we will make a small view class:

./js/View/TitleBarPathView.js

class TitleBarPathView {     constructor( boundingEl, dirService ){     this.el = boundingEl;     dirService.on( "update", () => this.render( dirService.getDir() ) );   }     render( dir ) {     this.el.innerHTML = dir;   } }  exports.TitleBarPathView = TitleBarPathView; 

You can note that the class simply subscribes for an update event and modifies the current path accordingly to DirService.

To get it live, we will add the following lines to the main script:

./js/app.js

 const { TitleBarPathView } = require( "./js/View/TitleBarPath" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required