Question

我正在使用durandal js入门套件应用程序，当我在Mozilla浏览器中查看页面源时，我看到了如下内容。

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

我找不到任何地方，data-view属性的作用。这是durandal js，或任何其他javascript库或html本身使用的自定义属性吗？

Answer 1

我想你问题的答案是这样的：该属性允许Durandal跟踪相对于应用程序的root目录所在位置的位置。 data-view="views/shell"基本上让Durandal知道shell.html模板（视图）位于views/目录中，每当有什么东西触发完整的应用程序刷新时，Durandal知道在哪里拉出这个确切的视图。 shell视图基本上是指Web应用程序的外壳。以下是重新加载应用程序/单击Flickr选项卡时的日志：

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

参见那些＆＃34; XHR完成加载＆＃34;消息？这是Durandal通过从data-view属性中获取路径来加载视图的地方。

点击＆＃34; Flickr＆＃34; tab为我们提供了以下内容：

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…}

看，＆＃34; XHR完成加载... views / flickr.html＆＃34; - 再次查询data-view属性以查看路径，并通过AJAX检索视图。

希望这能为你解决问题。

什么是Durandal JS中的数据视图属性

1 个答案: