View
View Components
View là container chứa các Page, nằm bên trong App, App có thể có 1 hoặc nhiều View, mặc định mỗi View sẽ kế thừa các routes từ App, tuy nhiên có thể tuỳ chỉnh với mỗi View cụ thể.
View Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| init | boolean | true | Tự động khởi tạo view instance |
| name | string | View name. Giúp truy xuất view instance thông qua zmp.views.[name] | |
| main | boolean | false | Đặt view trở thành view chính |
| tab | boolean | false | Sử dụng View dạng tab, là children của component TabView |
| tabActive | boolean | undefined | Xác định View tab đang active |
| initRouterOnTabShow | boolean | false | Nếu bật khi sử dụng View tab, không khởi tạo router của view và tải trang đầu tiên cho đến khi View tab được active và hiển thị |
| router | boolean | true | Set false để vô hiệu hóa view router |
| url | string | View's url mặc định. Nếu không chỉ định, sẽ sử dụng document url | |
| loadInitialPage | boolean | true | Khi được bật và không có trang con nào bên trong View. Sẽ tải trang đầu tiên khớp với URL khởi tạo |
| stackPages | boolean | false | Nếu được bật thì tất cả các trang trước đó trong navigation sẽ không bị xóa khỏi DOM khi chuyển trang. |
| allowDuplicateUrls | boolean | false | Có thể bật tham số này để cho phép tải các trang mới có cùng url với trang "đang hoạt động" trong view. |
| animate | boolean | true | Bật hiệu ứng chuyên trang |
| preloadPreviousPage | boolean | true | Bật/tắt tải trước các trang trước khi truy cập sâu navigation. Nếu sử dụng tính năng "swipe back page" cần bật preloadPreviousPage. |
| reloadPages | boolean | false | View sẽ luôn tải lại trang hiện đang hoạt động mà không cần tải trang mới |
| restoreScrollTopOnBack | boolean | true | khi được kích hoạt, sẽ cuộn lê đầu trang khi bạn quay lại trang này |
| iosPageLoadDelay | number | 0 | Độ trễ (tính bằng ms) sau khi trang mới sẽ được tải và chèn vào DOM và trước khi nó được chuyển đổi. Có thể tăng lên một chút để cải thiện hiệu suất. Sẽ chỉ có hiệu lực với theme iOS |
| mdPageLoadDelay | number | 0 | Độ trễ (tính bằng ms) sau khi trang mới sẽ được tải và chèn vào DOM và trước khi nó được chuyển đổi. Có thể tăng lên một chút để cải thiện hiệu suất. Sẽ chỉ có hiệu lực với theme MD |
| auroraPageLoadDelay | number | 0 | Độ trễ (tính bằng ms) sau khi trang mới sẽ được tải và chèn vào DOM và trước khi nó được chuyển đổi. Có thể tăng lên một chút để cải thiện hiệu suất. Sẽ chỉ có hiệu lực với theme Aurora |
| routesBeforeEnter | function(context) |array | Function (hoặc mảng các functions) sẽ được thực thi trước mỗi route được tải/truy cập. Để tiến hành tải route thì cần gọi resolve. Trường hợp array tất cả function trong mảng cần được resolved.Tương tự route beforeEnter nhưng sẽ hoạt động trên tất cả route | |
| routesBeforeLeave | function(context) |array | Function (hoặc mảng các functions) sẽ được thực thi trước mỗi route khi ngừng tải/thoát. Để tiến hành tải route thì cần gọi resolve. Trường hợp array tất cả function trong mảng cần được resolved.Tương tự route beforeLeave nhưng sẽ hoạt động trên tất cả route | |
| Elements Removal | |||
| removeElements | boolean | true | Trong quá trình chuyển trang Router có thể xóa các Page và Navbar elements không sử dụng khỏi DOM. |
| removeElementsWithTimeout | boolean | false | Khi bật router sẽ xóa elements sau timeout |
| removeElementsTimeout | number | 0 | Timeout để xóa elements (trường hợp removeElementsWithTimeout: true) |
| iOS Dynamic Navbar | |||
| iosDynamicNavbar | boolean | false | Bật hiệu ứng dynamic navbar trên iOS theme |
| iosAnimateNavbarBackIcon | boolean | true | Khi bật back icon sẽ có animation giống với native. Chỉ sử dụng trên dynamic navbar với back-link icon mặc định phía bên trái set với "sliding". |
| Swipe back | |||
| iosSwipeBack | boolean | true | Bật/tắt khả năng vuốt về bên trái để trở về trang trước. Trên iOS theme |
| iosSwipeBackThreshold | number | 0 | Giá trị tính theo px. Swipe back action sẽ bắt đàu nếu "touch distance" lớn hơn giá trị này. Trên iOS theme |
| iosSwipeBackActiveArea | number | 30 | Giá trị tính bằng px. Chiều rộng của cạnh trái màn hình sẽ triggers swipe back action. Trên iOS theme |
| iosSwipeBackAnimateShadow | boolean | true | Bật/tắt box-shadow animation khi thao tác swipe back thưc thiện. Có thể tắt nó để cải thiện hiệu suất. Trên iOS theme |
| iosSwipeBackAnimateOpacity | boolean | true | Bật/tắt opacity animation khi thực hiện swipe back action. Có thể tắt nó để cải thiện hiệu suất. Trên iOS theme |
| mdSwipeBack | boolean | false | Bật/tắt khả năng vuốt về bên trái để trở về trang trước. Trên MD theme |
| mdSwipeBackThreshold | number | 0 | Giá trị tính theo px. Swipe back action sẽ bắt đàu nếu "touch distance" lớn hơn giá trị này. Trên MD theme |
| mdSwipeBackActiveArea | number | 30 | Giá trị tính bằng px. Chiều rộng của cạnh trái màn hình sẽ triggers swipe back action. Trên MD theme |
| mdSwipeBackAnimateShadow | boolean | true | Bật/tắt box-shadow animation khi thao tác swipe back thưc thiện. Có thể tắt nó để cải thiện hiệu suất. Trên MD theme |
| mdSwipeBackAnimateOpacity | boolean | false | Bật/tắt opacity animation khi thực hiện swipe back action. Có thể tắt nó để cải thiện hiệu suất. Trên MD theme |
| auroraSwipeBack | boolean | true | Bật/tắt khả năng vuốt về bên trái để trở về trang trước. Trên Aurora theme |
| auroraSwipeBackThreshold | number | 0 | Giá trị tính theo px. Swipe back action sẽ bắt đàu nếu "touch distance" lớn hơn giá trị này. Trên Aurora theme |
| auroraSwipeBackActiveArea | number | 30 | Giá trị tính bằng px. Chiều rộng của cạnh trái màn hình sẽ triggers swipe back action. Trên Aurora theme |
| auroraSwipeBackAnimateShadow | boolean | false | Bật/tắt box-shadow animation khi thao tác swipe back thưc thiện. Có thể tắt nó để cải thiện hiệu suất. Trên Aurora theme |
| auroraSwipeBackAnimateOpacity | boolean | true | Bật/tắt opacity animation khi thực hiện swipe back action. Có thể tắt nó để cải thiện hiệu suất. Trên Aurora theme |
| Browser History | |||
| browserHistory | boolean | false | Người dùng có thể chuyển trang thông qua lịch sử ứng dụng bằng cách sử dụng nút back/forward mặc định của trình duyệt. |
| browserHistoryAnimate | boolean | false | Bật/tắt hiệu ứng chuyển trang khi lịch sử trình duyệt thay đổi |
| browserHistoryOnLoad | boolean | true | Tắt để bỏ qua phân tích cú pháp URL lịch sử trình duyệt và tải trang khi tải ứng dụng |
Lưu ý tất cả các parameters có thể được khai báo trong app global trong view property để set mặc định cho tất cả views. Ví dụ:
const appParams = {
view: {
iosDynamicNavbar: false,
},
};
View Methods & Properties
const view = zmp.views[name];
Sau khi đã có view instance, view instance cung cấp các methods và properties:
| Properties | | ------------------------- | ------------------------------------------------ | | view.app | liên kết đến global app instance | | view.el | View HTML element | | view.$el | ZMP dom instance với view HTML element | | view.name | View name đã được khai báo | | view.main | có phải view chính hay không | | view.routes | Mảng chứa các routes | | view.history | Mảng chứa lịch sử của view | | view.params | Object chứa các parameters khởi tạo | | view.router | Router instance được khởi tạo trong view | | Methods | | view.destroy() | Hủy view instance | | view.on(event, handler) | Thêm event handler | | view.once(event, handler) | Thêm event handler và xóa đi sau khi fired | | view.off(event, handler) | Xóa event handler | | view.off(event) | Xóa tất cả event handler của event được chỉ định | | view.emit(event, ...args) | Fire event trên instance |
View Events
Swipe-back chỉ khả dụng trên iOS theme.
Thêm các event handler thông qua các property on${EventName}
| Event | Prop | Description |
|---|---|---|
| viewInit | onViewInit | Event sẽ được triggered khi khởi tạo view |
| viewResize | onViewResize | Event sẽ được triggered khi thay đổi kích thước Master (khi masterDetailResizable enabled) |
| swipebackMove | onSwipebackMove | Event sẽ được triggered trong quá trình swipe back di chuyển |
| swipeBackBeforeChange | onSwipeBackBeforeChange | Event sẽ được triggered ngay trước swipe back animation tới trang trước khi người dùng thả ra |
| swipeBackAfterChange | onSwipeBackAfterChange | Event sẽ được triggered ngay sau swipe back animation tới trang trước khi người dùng thả ra |
| swipeBackBeforeReset | onSwipeBackBeforeReset | Event sẽ được triggered ngay trước swipe back animation tới trang hiện tại khi người dùng thả ra |
| swipeBackAfterReset | onSwipeBackAfterReset | Event sẽ được triggered ngay sau swipe back animation tới trang hiện tại khi người dùng thả ra |
Truy cập View Instance
Nếu khởi tạo tự động view instance (init= prop) Có thể truy cập instance thông qua:
- Nếu truyền name property (ví dụ: "left") Có thể truy xuất thông qua
zmp.views.left - main view (với main= prop) truy xuất thông qua
zmp.views.main
Ví dụ
Layout tối giản nhất
<View main>...</View>;
{
/* Renders to: */
}
<div className="view view-main">...</div>;
Với parameters
<View
url="/"
main
animate={false}
iosDynamicNavbar={false}
browserHistory={true}
>
...
</View>