CODEWITHSUNDEEP
javascripthtmldurandal
DesirePRG
DesirePRG

Reputation: 6388

what is data-view attribute in Durandal JS

I am playing around with durandal js starter kit application, and at some point when I viewed the source of the page in Mozilla browser, I saw something as follows.

<div class="" data-view="views/shell" style="" data-active-view="true"> </div>

I can't find anywhere, what the data-view attribute does. Is this a custom attribute used by durandal js, or by any other javascript library or by html itself?

Upvotes: 1

Views: 1004

Answers (1)

Adrian Oprea
Adrian Oprea

Reputation: 2930

I guess the answer to your question is this: That attribute allows Durandal to keep track of where, relative to the root directory of the application are views located. data-view="views/shell" basically lets Durandal know that the shell.html template(view) is located in the views/ directory, and whenever something triggers a full application refresh, Durandal knows where to pull this exact view. The shell view basically means the outer shell of the web application. Here are the logs when reloading the application/clicking on the Flickr tab:

Debug:Enabled
Application:Starting
Plugin:Installed plugins/router
Plugin:Installed plugins/dialog
Application:Started
XHR finished loading: GET "http://localhost:8000/app/views/shell.html".
Navigation Complete ctor {displayName: "Welcome to the Durandal Starter Kit!", description: "Durandal is a cross-device, cross-platform client … Applications (SPAs) easy to create and maintain.", features: Array[11], __moduleId__: "viewmodels/welcome"} Object {fragment: "", queryString: null, config: Object, params: Array[0], queryParams: null}
Binding views/shell Object {router: Object, search: function, activate: function, __moduleId__: "viewmodels/shell"}
XHR finished loading: GET "http://localhost:8000/app/views/welcome.html".
Using CSS3 animations.
Binding views/welcome ctor {displayName: "Welcome to the Durandal Starter Kit!", description: "Durandal is a cross-device, cross-platform client … Applications (SPAs) easy to create and maintain.", features: Array[11], __moduleId__: "viewmodels/welcome"}

See those "XHR finished loading" messages? That's where Durandal is loading the views by fetching their paths from data-view attributes.

Clicking on the "Flickr" tab gives us the following:

Activating Object {displayName: "Flickr", images: function, activate: function, select: function, canDeactivate: function…}
Navigation Complete Object {displayName: "Flickr", images: function, activate: function, select: function, canDeactivate: function…} Object {fragment: "flickr", queryString: null, config: Object, params: Array[0], queryParams: null}
XHR finished loading: GET "http://localhost:8000/app/views/flickr.html".
Binding views/flickr Object {displayName: "Flickr", images: function, activate: function, select: function, canDeactivate: function…}

See, "XHR finished loading ...views/flickr.html" -- the data-view attribute being queried again for view path and the view being retrieved via AJAX.

Hope this clears things out for you.

Upvotes: 1

Related Questions