Views

Loading views (Dynamic)

To fetch views or pages from your server and add to your app, add class view-anchor to your view anchors via the HTML class attribute. Add a data-href attribute to the anchors (any other element will work) setting to the absolute path to the views.
You have to add a data-name attribute which is just the unique name of the page/view to be fetched.

Note: It doesn't matter the HTML structure you use.

<nav class="side-nav">
    <ul>
        <li class="view-anchor" data-name="books" data-href="dashboard/books">Books</li>
        <li class="view-anchor" data-name="users" data-href="dashboard/users">Users</li>
    </ul>
</nav>

You can use any class other than view-anchor or even any selector to define your view anchors. To do this set the viewSelector config in your script.

Dash.init({
    viewSelector: 'nav ul li',
});

// OR

Dash.config.viewSelector = '.side-panel ul.nav li';

Content

You need to tell DashJS which wrapper element in your html should contain fetched views. By default #content will work gracefully without any config. You can use any other element, just set the config as shown below.
HTML

<div id="content-wrap">
    <!-- View content goes here -->
</div>

Javascript

Dash.init({
    content: 'div.content-wrap',
});

// OR

Dash.config.content = 'div.content-wrap';

Note that this wrapper's content will be completely replaced with the contents from fetched views.

Extending Dash.getView

In the process of fetching views, you might want to do something like show a message or a progress bar. To do that, define a progress callback via Dash.getView.progress as shown below.

Dash.getView.progress = function(xhr, event, element) {
    // You have access the $xhr object here and progress $event object
    // The clicked view anchor is available via $element
}

If you simply want to execute some callback after DashJS is done fetching views, define a callback via Dash.getView.then as shown below.

Dash.getView.then = function(view, response, contentWrapper) {
    var xhr = this;
    // Initializations here
};

Parameters
view

• The data-name attribute of the fetched view's anchor element if any

response

• The raw content returned from the request

contentWrapper

• The content wrapper DOM element

Manually fetching views

There are three ways to manually fetch views, first is by index, pass the index of the anchor element to Dash.getView(), note that index is 0 based and is according to your html structure.
HTML

<nav>
    <ul>
        <!-- index 0 -->
        <li class="view-anchor" data-name="books" data-href="dashboard/books">Books</li>
        <!-- index 1 -->
        <li class="view-anchor" data-name="users" data-href="dashboard/users">Users</li>
        <!-- index 2 -->
        <li class="view-anchor" data-name="authors" data-href="dashboard/authors">Authors</li>
    </ul>
</nav>

By Index

Dash.getView(1);

By View name
You can fetch views by view name as shown below

Dash.getView('authors');

By URL
Third is by URL, pass the URL of the view to be fetched to Dash.getView()

Dash.getView('/dashboard/songs');

---

Syntaxt

Dash.getView(url [, config]);

Config Config options with their default values

{
    // {Mixed} Form data to pass as request body
    data: {},
    // {Function} Callback to execute on successful request
    success: null,
    // {Boolean} Run default Dash.getView.then callback if defined
    defaultCallback: true,
    // {HTMLElement} The container element within which HTML is rendered
    container: HTMLElement that matches Dash.config.content i.e. the default content wrapper
}

Reloading views manually

You can reload your views manually by calling Dash.reloadContent(). Note that this doesn't reload the entire application, just the content within the content wrapper will be reloaded.

Dash.reloadContent();

Changing browser history

DashJS allows you to change the user's history effectively changing the URL in the address bar, a vital feature for async apps.
While implementing the dynamic method of loading views, DashJS seamlessly handles changing history and registers a callback which when invoked fetches the appropriate view when the user navigates to a page using the ← and → icons in the browser. All you need to do is set the history config as shown below.

Dash.init({
    history: true
});

// OR

Dash.config.history = true;

URL Format
DashJS will append the view name (the data-name attribute) to the app URL which can be set via Dash.config.appURL otherwise DashJS will use the current URL in the address bar.
Suppose your app URL is https://myapp.com/app, when a user clicks on for example the authors view anchor, the address bar will change to display https://myapp.com/app/authors> Note that this won't cause the browser to load the new URL.