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

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" ...