This is a migrated thread and some comments may be shown as answers.

Navigate to SplitView from View

2 Answers 100 Views

SplitView

This is a migrated thread and some comments may be shown as answers.

Shaun asked on 25 Jul 2017, 05:19 PM

Hi, I'm trying to use a SplitView within a layout in a mobile application. I'm using MVVM.

I've defined the splitview in the html body, outside of any layouts or other views. The application starts by loading a basic layout and view It then navigates to different views based on data entered.

Can I use my main layout as the layout for the splitview in addition to the starting view, and other standard (non-split) views?

Does the splitview need to contain its own layout for each pane?

I can't directly navigate to "v_bill_splitview" as the page appears blank. I need to go through another basic view which navigates to the splitview when a tabstrip link is clicked - once the splitview layout is displayed, the content is still blank.

Any thoughts / guidance? Thanks.

Example structure:

<body>

<div data-role="layout" id="l_layout" data-id="l_layout" style="display:none;">
<section data-role="content"></section>
</div>


<div id="v_loader" data-role="view" data-layout="l_layout" data-show="onShow" style="visibility:visible">
<div class="center">
<p>
<object data="logo.svg" type="image/svg+xml">
<img src="logo.png"/>
</object>
</p>
<p>
Loading...
</p>
</div>
</div>


<div data-role="layout" id="l_main" data-id="l_main" style="display:none">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-click="l_main_homeOnClick" data-align="left">
<img src="logo.png" style="height: 1.8em; width: 1.8em;"/>
</a>
<span data-role="view-title"></span>
</div>
<div style="text-align: center;">
<img src="../img/logo.png" style="max-height:25px; text-align:center"/>
</div>
</header>
<section data-role="content"></section>
</div>


<div data-role="view"
id="v_search"
data-id="v_search"
data-layout="l_main"
data-model="app.models.search_criteria"
data-title="title"
style="display:none">

<ul data-role="listview">
<li>
<label>Test
<input type="text" class="km-text"/>
</label>
</li>
<li>
<label>Test2
<input type="text" class="km-text"/>
</label>
</li>
</ul>
<hr/>
<ul data-role="listview" data-bind="source: dataSources.types" data-template="tpl_types"></ul>
<br/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<a data-role="button"
data-bind="events: { click: events.searchClick }"
data-icon="search">
Search
</a>
</div>
</div>
</div>
</div>

<div data-role="splitview"
id="v_bill_splitview"
data-id="v_bill_splitview"
style="display:none"
data-layout="l_bill"
data-style="vertical">



<div data-role="pane" style="-webkit-box-flex: 4" id="main-pane" data-layout="l_bill2">


<div data-role="layout" data-id="l_bill2">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<a data-role="button" data-click="l_main_homeOnClick" data-align="left">
<img src="track_trace_logo.png" style="height: 2em; width: 2em;"/>
</a>
<span class="l_bill_title">Freight Bill 2</span>
</div>
</header>
</div>

<div data-role="view" data-title="Main Pane">
Main pane Initial view
</div>

<div data-role="view" data-title="Main Pane Bar View" id="main-bar" data-show="collapseSidePane">
Main pane Bar view
</div>
</div>

<div data-role="pane" data-initial="#view1">
<div data-role="view" id="view1" data-id="view1" data-title="Side Pane">
<h3>view1</h3>
<a data-role="button" data-target="main-pane" href="#main-bar">Bar (Main pane)</a>
</div>
</div>
</div>

2 Answers, 1 is accepted

Accepted