Hello i am working on onsen ui with angularjs and have made a demo app which includes google maps,All things were working smootly,But after testing i found an issue on ons-back-button,Please see the case,I have page1 which containc google maps and when page loaded first time map is completely loaded fine,but from page1 when i navigate to page2 and returns back to page1 using (ons-back-button) ,my map broken and never loaded..I have wasted my 3 days in solving this,with no luck,can anyone please help me how to solve it,my code is:
html
<div class="mapclass">
<ons-row class="app-map">
<ons-col>
<map zoom="11" center="[{{lat}}, {{lng}}]"
draggable: false >
<info-window id="marker-info" >
<div class="mpopup-wrap" style="padding: 0; width: 250px;">
<div class="mpopup-box">
<strong class="title">{{ infoWindow.title}}</strong>
<img src="{{mapimg}}" style="float: left; width: 80px; height: 53px; margin-right: 5px;" />
<span class="info">
<i class="fa fa-map-marker"></i>
{{infoWindow.loc}}
</span>
<span class="info">
<i class="fa fa-home"></i>
{{infoWindow.content}}
</span>
</div>
</div>
</info-window>
<marker ng-repeat="(id, marker) in markers" id="{{ id}}"
position="[{{lat}}, {{lng}}]"
title= "hello"
visible="true"
on-click="showMarker(event, $index)" >
</marker>
</map>
</ons-col>
</ons-row>
</div>
Try using prepop or postpop to execute or reload the goole maps.
Onsen docs (prepop, postpop)
I think this thread might be very connected to your issue. I'm not familiar with onsen, but what you would like to do anyways is to control the behavior from some controller, and with UI-route-provider, you could manage to control if page reloads on switch.
See the first answer here
Related
I am currently working on a dashboard based on AdminLTE 3. I removed the parts that I don't need and made some changes on the AdminLTE HTML and CSS files. The thing is I need this project to be a Vue or a React project. For now I only need the index.html (an empty dashboard, navbar, sidebar and a footer). There is one main CSS file which has all the classes that the project uses and there are some js files.
I tried to create an empty Vue project and create components like Navbar.vue, Footer.vue, Sidebar.vue etc. But I don't know how to integrate this one big CSS file for all of these and Js files as well. What should I do? I know there is no way to put all the script tags and links inside every components, that didn't work. Also I couldn't manage to use these files on the App.vue
Is there any way that I can convert this HTML project into a Vue or a React one?
Vue is incrementally adoptable. And very small.
Which means you can use it to render just one button. Or you can render the entire contents of your page with it. Your choice.
Also, you can just take the existing HTML and place it inside the template of a .vue single file component (SFC). It doesn't even need a <script> tag.
Example:
Vue.component('your-question', {
template: `
<div class="post-layout">
<div class="votecell post-layout--left">
<div class="js-voting-container grid fd-column ai-stretch gs4 fc-black-200" data-post-id="64535387">
<button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer fc-theme-primary" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary" aria-describedby="--stacks-s-tooltip-9i3a4gec"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button><div id="--stacks-s-tooltip-9i3a4gec" class="s-popover s-popover__tooltip pe-none" aria-hidden="true" role="tooltip">This question shows research effort; it is useful and clear<div class="s-popover--arrow"></div></div>
<div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center c-pointer" itemprop="upvoteCount" data-value="1" role="button" tabindex="0" data-s-tooltip-placement="right" data-controller="null s-tooltip" aria-describedby="--stacks-s-tooltip-lk3p5mtq">0</div><div id="--stacks-s-tooltip-lk3p5mtq" class="s-popover s-popover__tooltip pe-none" aria-hidden="true" role="tooltip">View upvote and downvote totals.<div class="s-popover--arrow"></div></div>
<button class="js-vote-down-btn grid--cell s-btn s-btn__unset c-pointer" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="true" aria-label="Down vote" data-selected-classes="fc-theme-primary" aria-describedby="--stacks-s-tooltip-ib7zwamw"><svg aria-hidden="true" class="m0 svg-icon iconArrowDownLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 10h32L18 26 2 10z"></path></svg></button><div id="--stacks-s-tooltip-ib7zwamw" class="s-popover s-popover__tooltip pe-none wmx2" aria-hidden="true" role="tooltip" style="margin: 0px;">This question does not show any research effort; it is unclear or not useful (click again to undo)<div class="s-popover--arrow" style=""></div></div>
<button class="js-bookmark-btn s-btn s-btn__unset c-pointer py4 js-gps-track" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Bookmark" data-selected-classes="fc-yellow-600" data-gps-track="post.click({ item: 1, priv: 17, post_type: 1 })" aria-describedby="--stacks-s-tooltip-jn0zc88f">
<svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg>
<div class="js-bookmark-count mt4 d-none" data-value=""></div>
</button><div id="--stacks-s-tooltip-jn0zc88f" class="s-popover s-popover__tooltip pe-none" aria-hidden="true" role="tooltip">Bookmark this question.<div class="s-popover--arrow"></div></div>
<a class="js-post-issue grid--cell s-btn s-btn__unset c-pointer py6 mx-auto" href="/posts/64535387/timeline" data-shortcut="T" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-label="Timeline" aria-describedby="--stacks-s-tooltip-ud2iy1dm"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 113.73 6.77L8.2 14.3A6 6 0 105 9l3.01-.01-4 4-4-4h3L3 9zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10V5z"></path></svg></a><div id="--stacks-s-tooltip-ud2iy1dm" class="s-popover s-popover__tooltip pe-none" aria-hidden="true" role="tooltip">Show activity on this post.<div class="s-popover--arrow"></div></div>
</div>
</div>
<div class="postcell post-layout--right">
<div class="s-prose js-post-body" itemprop="text">
<p>I am currently working on a dashboard based on AdminLTE 3. I removed the parts that I don't need and made some changes on the AdminLTE HTML and CSS files. The thing is I need this project to be a Vue or a React project. For now I only need the index.html (an empty dashboard, navbar, sidebar and a footer). There is one main CSS file which has all the classes that the project uses and there are some js files.</p>
<p>I tried to create an empty Vue project and create components like Navbar.vue, Footer.vue, Sidebar.vue etc. But I don't know how to integrate this one big CSS file for all of these and Js files as well. What should I do? I know there is no way to put all the script tags and links inside every components, that didn't work. Also I couldn't manage to use these files on the App.vue</p>
<p>Is there any way that I can convert this HTML project into a Vue or a React one?</p>
</div>
<div class="mt24 mb12">
<div class="post-taglist grid gs4 gsy fd-column">
<div class="grid ps-relative">
<span class="edit-tags-wrapper">htmlreactjsvue.jsdashboardadminlte<span>Edit tags</span></span>
</div>
</div>
</div>
<div class="mb0 ">
<div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4">
<div class="grid--cell mr16" style="flex: 1 1 100px;">
<div class="post-menu">
share<div class="s-popover z-dropdown" style="width: unset; max-width: 28em;" id="se-share-sheet-0"><div class="s-popover--arrow"></div><div><span class="js-title fw-bold">Share a link to this question</span> <span class="js-subtitle">(includes your user id)</span></div><div class="my8"><input type="text" class="js-input s-input wmn3 sm:wmn-initial" readonly=""></div><div class="d-flex jc-space-between mbn4"><button class="js-copy-link-btn s-btn s-btn__link">Copy link</button>CC BY-SA 4.0<div class="js-social-container"></div></div></div>
<span class="lsep">|</span>
edit
<span class="lsep">|</span>
<button id="btnFollowPost-64535387" class="s-btn s-btn__link fc-black-400 h:fc-black-700 pb2 js-follow-post js-follow-question js-gps-track" role="button" data-gps-track="post.click({ item: 14, priv: 17, post_type: 1 })" data-controller="s-tooltip " data-s-tooltip-placement="bottom" data-s-popover-placement="bottom" aria-controls="" aria-describedby="--stacks-s-tooltip-rlrg4nxp">
follow
</button><div id="--stacks-s-tooltip-rlrg4nxp" class="s-popover s-popover__tooltip pe-none" aria-hidden="true" role="tooltip">Follow this question to receive notifications<div class="s-popover--arrow"></div></div>
<span class="lsep">|</span>
close
<span class="lsep">|</span>
flag
<span class="lsep">|</span>
<div data-controller="s-popover" data-s-popover-reference-selector="#btnProtectLoggedIn">
<button id="btnProtectLoggedIn" class="s-btn s-btn__link fc-black-400 h:fc-black-700 px4 pb2 js-gps-track" role="button" aria-controls="divConfirmProtect" data-gps-track="post.click({ item: 12, priv: 17, post_type: 1 })" data-action="s-popover#toggle" data-s-popover-placement="bottom-start" data-s-popover-toggle-class="is-selected" title="disallow answers by anonymous and very new low rep users">
protect
</button>
<div class="s-popover px16" id="divConfirmProtect" role="menu" aria-hidden="true">
<p class="bold mb4">Are you sure?</p>
<p class="mb12">Protect this question if it is highly active and likely to receive spam activity or non-answers (e.g. "Me too!" "Thanks!"). Anonymous and low reputation users can’t answer protected questions. Learn more.</p>
<p class="mb0">
<button id="protect-post-64535387" class="s-btn s-btn__primary mr8" type="button" aria-pressed="false">Protect question</button>
<button class="s-btn s-btn__link" type="button" aria-pressed="false" aria-label="Close" data-action="s-popover#toggle">Cancel</button>
</p>
<div class="s-popover--arrow"></div>
</div>
</div>
</div>
</div>
<div class="post-signature owner grid--cell">
<div class="user-info ">
<div class="user-action-time">
asked <span title="2020-10-26 10:31:30Z" class="relativetime">yesterday</span>
</div>
<div class="user-gravatar32">
<div class="gravatar-wrapper-32"><img src="https://lh3.googleusercontent.com/a-/AOh14Ghue30DHLGWKxu5iK2LpyQskJVNNGvkiWGN2Wt6=k-s32" alt="" width="32" height="32" class="bar-sm"></div>
</div>
<div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
Yasin Demirkaya<span class="d-none" itemprop="name">Yasin Demirkaya</span>
<div class="-flair">
<span class="reputation-score" title="reputation score " dir="ltr">9</span><span title="2 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">2</span></span><span class="v-visible-sr">2 bronze badges</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="post-layout--right">
<div id="comments-64535387" class="comments js-comments-container bt bc-black-075 mt12" data-post-id="64535387" data-min-length="15">
<ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="true" data-cansee="false" data-comments-unavailable="false" data-addlink-disabled="false">
</ul>
<div class="comment-form">
<form id="add-comment-64535387" class="" data-placeholdertext="Use comments to ask for more information or suggest improvements. Avoid answering questions in comments."><div class="js-comment-form-layout d-flex fw-wrap jc-end mt8"><div class="w75 fl-grow1"><div class="js-comment-text-input-container"><textarea name="comment" class="s-textarea js-comment-text-input" rows="3" cols="68" placeholder="Use comments to ask for more information or suggest improvements. Avoid answering questions in comments."></textarea></div><span class="text-counter cool">enter at least 15 characters</span> <span class="form-error"></span></div><div class="d-flex fd-column jc-space-between pb4 mb16 ml8"><button type="submit" class="s-btn s-btn__primary">Add Comment</button><button type="button" class="js-edit-comment-cancel s-btn s-btn__link ta-left px2 mt4"></button><br><button type="button" class="js-comment-help-link s-btn s-btn__link ta-left px2">help</button></div></div></form>
</div>
</div>
<div id="comments-link-64535387" style="display: none;">
<a class="js-add-link comments-link" title="Use comments to ask for more information or suggest improvements. Avoid answering questions in comments." href="#" role="button">add a comment</a>
<span class="js-link-separator dno"> | </span>
<a class="js-show-link comments-link dno" title="expand to show all comments on this post" href="#" onclick="" role="button"></a>
</div>
</div>
</div>
`
});
new Vue({
el: '#app'
})
#app {
width: 600px;
}
html, body {
min-width: 0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Shared/stacks.css?v=3b16a418cc4c">
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css?v=fdd4b4684691">
<div id="app">
<your-question />
</div>
Is it Vue? Entirely.
Does it have any reactive data? Not yet.
How much did it take? A copy-paste, basically.
Obviously, it's more than just that. You'll also need to load the javascript and it can't be in the <template>. And you'll likely want to cut portions of your markup into separate components. But, for starters, all you need to do is present the markup and load your scripts. Everything should work as if it wasn't Vue rendering it.
To make it clearer: Vue can render anything and it doesn't care what it is. It can be an Angular app or a React app or even another Vue app.
A tool like the one you're looking for does not and cannot exist, because it wouldn't know what part of the existing markup should be transformed into a Vue component.
But, basically, each Vue app is one big component, which replaces the DOM element you mount it on.
In the above example this is all the app's markup:
<div id="app">
<your-question />
</div>
And <your-question>, defined as a Vue component does the rendering, when you create a
new Vue({ el: '#app '}).
Also note that, once you create a big Vue component, most IDEs will allow you to select a portion of its template and generate a new Vue component from the selected markup, creating the new SFC for you, copying the template portion into the new file and replacing the removed markup with the new component's tag, also resolving necessary imports and any required methods/computed/data or props.
Since the css file already included all the styles you need, just referencing it in the index.html if you created the project via vue-cli.
For instance, I have a css file named app.css.
Copied it to public folder, where the index.html locates here as well.
public/
- index.html
- app.css
Open index.html, reference as that in HTML. But use <% BASE_URL %> at the beginning.
<link rel="stylesheet" href="<%= BASE_URL %>app.css">
In your case, you don't have to write any css code in vue components. Maybe just copying and pasting the HTML code is working. If you hope to override the style within a specific component, use <style scoped> to avoid impacting global styles.
I am currently working on a web application using angular and angular material. The page in question holds several profiles each with a button that when clicked removes the information currently showing and replaces it with the rest of the profile information. The issue is that when I click this button on one profile it does this information flip on all the profiles at once. I need help figuring out how to have the button only affect the profile it is associated with.
I am still relatively new to coding, so I've mainly been doing research on advice on how to approach this particular situation, but nothing I've found so far has worked.
<mat-card class="bpBuddyCont" *ngFor= "let profile of profileList">
<div>
<ul class="bpBuddies">
<li class="li2">
<div *ngIf="!showHiddenInfo">
<mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
<mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
<mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
</div>
<div class="column4" *ngIf="showHiddenInfo">
<span class="details4">Additional Notes: </span>
<span class="details3">{{profile.additionalNotes}}</span>
</div>
</div>
<button mat-button color="primary" class="btn" (click)="showHiddenInfo = !showHiddenInfo">{{showHiddenInfo ? 'Back' : 'More...'}}</button>
</li>
</ul>
</div>
</mat-card>
You can extend the profile object with
profile.showHiddenInfo and set it as false initially.
For this in your js(most probably the component file) after getting profileList,
profileList.forEach((profile, index) => {
angular.extend(profile, {showHiddenInfo: false});
//not sure about this angular.extend but you need to extend your object here
});
Now when the button is clicked replace showHiddenInfo, i.e.
profile.showHiddenInfo = !profile.showHiddenInfo;
And Replace
*ngIf="showHiddenInfo"
with
*ngIf="profile.showHiddenInfo"
You can do this using one boolean variable for each object, as profile.isExpanded and on click change it as like:
(click)="profile.isExpanded = !profile.isExpanded"
HTML Code:
<mat-card class="bpBuddyCont" *ngFor="let profile of profileList">
<div>
<ul class="bpBuddies">
<li class="li2">
<div *ngIf="!profile.isExpanded">
<mat-card-title class="specifics">{{profile.dogName}}</mat-card-title>
<mat-card-subtitle class="subtitle">Owner ~ {{profile.ownerFirstName}}</mat-card-subtitle>
<mat-card-subtitle>Member Since {{profile.yearJoined}}</mat-card-subtitle>
</div>
<div class="column4" *ngIf="profile.isExpanded">
<span class="details4">Additional Notes: </span>
<span class="details3">{{profile.additionalNotes}}</span>
</div>
<button mat-button color="primary" class="btn" (click)="profile.isExpanded = !profile.isExpanded">{{profile.isExpanded ? 'Back' : 'More...'}}</button>
</li>
</ul>
</div>
</mat-card>
No change in TS file.
WORKING STACKBLITZ
I'm trying to build a "Team Member" page from JSON data.
I can create the page with basic things like firstName, lastName, position.
Each team member has their own page with a little more information
What I cant figure out is how to include the team members url to my [routerLink].
My router link would look like this which I have setup in my routes
<a [routerLink]="['./glenn']">
And this is how I'm attempting to use it
<div class="team-members" *ngFor="let teammember of teammembers" >
<div class="clearfix">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">
<a [routerLink]="['./"{{teammember.firstName}}"']">
<div class="member-pic-holder">
<img alt="" src='{{teammember.photo}}' />
<div class="member-overlay"></div>
</div>
<h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
<p class="company-position">{{teammember.position}}</p>
</a>
</div>
</div>
</div>
Any thoughts on this one please?
It's also breaking when I'm trying to include the team-members photo
<img alt="" src='{{teammember.photo}}' />
However one thing at a time!
Thanks
GWS
You are using the {{ foo.bar }} binding incorrectly, the {{ }} syntax allows you to do one way binding, what you want is to use regular js expressions when binding to your objects properties.
When binding to an html element attribute, you can use the [attr.{id|href|etc}] binding, in your case, for the href of the image you can use:
<img alt="" [attr.href] = 'teammember.photo' />
And for the router, simply use [routerLink] = "[teammember.firstName]" (not sure why you need the ./, if you do need it, you could append it using a getter on your team member class, as shown bellow.
For your routes, you could do something along the lines of:
Team Member Class
export class TeamMember {
// ...properties and constructor
private memberUrl: string = "foobar"
get MemberRoute(){
return `./${this.memberUrl}`;
}
}
Template:
<div class="team-members" *ngFor="let teammember of teammembers" >
<div class="clearfix">
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-6 team-member member-item" style="cursor: pointer;">
<a [routerLink]="[teammember.MemberRoute']">
<div class="member-pic-holder">
<img [attr.href] = 'teammember.photo' />
<div class="member-overlay"></div>
</div>
<h4>{{teammember.firstName}}<br/>{{teammember.lastName}} <span class="fa fa-arrow-right"></span></h4>
<p class="company-position">{{teammember.position}}</p>
</a>
</div>
</div>
</div>
Hope this helps!
can you try like this:
['./',teammember.firstName]
for img use
<img alt="" [src]="teammember.photo" />
I have a webbrowser control (name: WB) in my VB .net form.
I have loaded a webpage in webbrowser. Here is the sample html:
enter code here
<script type="text/javascript">
Sys.WebForms.PageRequestManager._initialize
('ctl00$ContentPlaceHolder1$ScriptManager1', 'form1',
['tctl00$ContentPlaceHolder1$UpdatePanel1',
'ContentPlaceHolder1_UpdatePanel1'], [], [], 90, 'ctl00');
</script>
<div class="row">
<div class="control group alternating">
<h2>Results</h2>
<div id="ContentPlaceHolder1_UpdatePanel1">
<div class="row">
<a id="ContentPlaceHolder1_Repeater1_LinkButton1_0"
href="javascript:__doPostBack('
ctl00$ContentPlaceHolder1$Repeater1$ctl00$LinkButton1','')">
<strong>A. Bleakley Chandler, MD</strong></a><br />
Georgia Medical College<br />Augusta, GA, USA
</div>
<div class="row">
<a id="ContentPlaceHolder1_Repeater1_LinkButton1_1"
href="javascript:__doPostBack('
ctl00$ContentPlaceHolder1$Repeater1$ctl01$LinkButton1','')">
<strong>A. Kyle Mack, MD</strong></a><br />
Ann and Robert H. Lurie Children's Hospital of Chicago<br />
</div>
<div class="row">
<a id="ContentPlaceHolder1_Repeater1_LinkButton1_2"
href="javascript:__doPostBack('
ctl00$ContentPlaceHolder1$Repeater1$ctl02$LinkButton1','')">
<strong>A. Lawrence Ossias, MD</strong></a><br />
Mount Sinai NYC<br />
</div>
<div class="row no-shading">
<div class="pagination-arrows right">
<span>
1 of 100</span>
<a id="ctl00_ContentPlaceHolder1_Repeater1Prev" class="aspNetDisabled ir
prev">prev</a>
<a id="ctl00_ContentPlaceHolder1_Repeater1Next" class="ir next"
href="javascript:__doPostBack('
ctl00$ContentPlaceHolder1$Repeater1Next','')">next</a>
</div>
</div>
</div>
Now I want to click on the first element of Repeater control. My InvokeMember code:
Dim pLink As HtmlElement = WB.Document.GetElementById
("ContentPlaceHolder1_Repeater1_LinkButton1_0")
pLink.InvokeMember("click") 'doesn't work
But due to some unknown reason, the click doesn't fire inside this repeater control. Other links in the page works fine with "invokemember("click")"
like the following one :
Dim pLink As HtmlElement = WB.Document.GetElementById
("ctl00_ContentPlaceHolder1_Repeater1Next")
pLink.InvokeMember("click") 'Works fine..
I tried GeckoFx browser control (geckoanchorelement.click), this did not work. I also tried to send MouseClick thru postmessage api - this also failed.
Hi everybody '
I am currently building a windows 8 app where I make a search and get result in the result page(result.html) as grid-ListView.
My problem is to get and pass item value to the Detail page
for example this is my html template:
<div id="basicsTemplate"
data-win-control="WinJS.Binding.Template" >
<div class="mediumListIconTextItem"
data-win-control="WinJS.UI.ItemContainer"
data-win-options="{oninvoked: handler}>
<div style="width: 160px; height: 60.34px;">
<img src="#" data-win-bind="alt:business_name; src: photo_thumbnail" /> </div>
<div class="address" >
<h3 data-win-bind="innerText: business_name" style="width: 121px;"></h3>
<h4 data-win-bind="innerText: category_name" style="width: 95px;"></h4>
<h4 data-win-bind="innerText: business_no" id="nober" style="width: 95px;"></h4>
<h4 data-win-bind="innerText: town" style="width: 95px;"></h4>
</div>
</div>
</div>
this is the handler function in my result.js
function handler(e) {
var listFlyout = document.getElementById("nober");
window.sessionStorage.setItem("text", listFlyout);
WinJS.Navigation.navigate("../pages/businessPage/businessPage.html" );
}
but it's returning me the undefined value in the businessPage.html
My real prolem is to pass this html attribute data-win-bind="innerText: business_name" to the detail.html page so that I can use it for forther rest-api
Please your quit help will be great to me thanks in advance.
Try
var x= lView.selection.getItems();
This will get the selected data array from the getItems() method in the WinJS library