天天看點

二十六、HTML5單頁架構View.js介紹 - 視圖回退顯示

不需要 Npm 的單頁應用架構:

View.js - http://view-js.com

View.js允許開發者設定視圖是否可以『直接通路』,亦即:

是否可以根據視圖的URI位置打開視圖

我們來看一個可以直接打開的例子:

二十六、HTML5單頁架構View.js介紹 - 視圖回退顯示

如上圖所示,視圖:“attr_data-view-rel”便是可以直接通路的。

我們再來看一個不能直接打開的例子:

二十六、HTML5單頁架構View.js介紹 - 視圖回退顯示

其中,視圖:

ProfileSubPage

Page2

均是不能直接通路,均在重新整理後離開切換到了其它視圖。亦即,這兩個視圖将顯示動作回退至其它視圖。

之是以

ProfileSubPage

視圖在重新整理後回退至

Profile

視圖,而不是像

Page2

一樣切換至首頁,是因為該視圖使用屬性:

data-view-rel

設定了回退視圖(亦即,該視圖不能直接通路時需要展現的視圖),源碼如下所示:

<section id = "profile-sub" data-view = "true" data-view-directly-accessible = "false" data-view-fallback = "profile">
	<header>
		<span class = "nav-back" data-view-rel = ":back"></span>
		ProfileSubPage
	</header>
	<h1>This is a sub page for profile.</h1>
	<div data-view-rel = "page3" class = "btn">Navigate to page 3.</div>
</section>
           

注:

data-view-fallback

屬性需要聲明在視圖的布局骨架上;

設定的回退視圖也可以是不能直接通路的,此時View.js将以鍊條的形式自動向上查找可以直接通路的視圖

有了這個特性的輔助,開發者就可以将複雜的功能拆分為多個子步驟,在多個視圖中分别實施了。

[第一篇]

[上一篇 - 視圖布局] [下一篇 - 視圖切換動畫]

繼續閱讀