Aurelia eating my Bookmarks - aurelia

I am working on a legacy application that is being rewritten using Aurelia, the application has a bunch of static html in a tblHelp that needs to be displayed. I am using innerhtml.bind on a div in my view to databind the stored static HTML into the view. Each record is essentially a document complete with a full table of contents that links to other divs within the document (Bookmarks).
Something like:
<div id="toc">
<h1>Table of Contents</h1>
<ul>
<li>Section 1<li>
<li>Section 2<li>
</ul>
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Paragraph Text...</p>
<p>Back to Table of Contents</p>
</div>
When I display the resulting page in my Aurelia view and click on the links, rather than moving to the proper Div on the current page, it seems to be attempting to route to an unknown route and ends up returning to the home page (that is my unknown route behavior). How do I make the Aurelia Router know that I am just moving around the same page and do not require it to route to another page?

I think you need to change your <div id= to <a id= which is the correct syntax for anchors. Hopefully Aurelia will recognize them as legitimate anchors when formatted correctly.
Also, since an anchor tag shouldn't wrap the whole content, you'll just open and close it at the top of the div. You can even leave the divs there but should not duplicate the id.
Update:
That being said, I created a GistRun that actually demonstrates that Aurelia should be able to handle the <div id= anchor targets. So, I'm not exactly sure why you're having problems.
Maybe this GistRun or the more standard <a id= approach will help you.

Related

Why are Vue dynamic components destroyed inside loop every re-render?

I run into an issue with Vuejs 2.x version (latest). While rendering a list of item inside a loop, if I make changes to the items then the normal components are not destroyed but the dynamic components will always be destroyed:
I have put a short sample code here:
https://gist.github.com/yellow1912/fc1c053e07c1ca136148484cf7f79d1a
I have also put a codepen here:
https://codepen.io/raineng/pen/zYGOXYY?editors=1111
<nl-test inline-template>
<div>
<div v-on:click="increase"> increase here please </div><br><br>
<div v-on:click="decrease"> decrease here please </div>
<ul>
<li v-for="(value, key) in getItems()" :key="key">
printing
<component :is="getItem()" :key="key"></component>
<nl-test inline-template>
<div>
this is a test here
</div>
</nl-test>
</li>
</ul>
</div>
</nl-test>
To see what I mean, open the console tab on codepen, click the add item and you will see that the dynamic component items are destroyed and re-created everytime.
I found out why, I need to use keep-alive:
https://v2.vuejs.org/v2/guide/components-dynamic-async.html
To quote:
When switching between these components though, you’ll sometimes want
to maintain their state or avoid re-rendering for performance reasons
Recreating dynamic components is normally useful behavior, but in this
case, we’d really like those tab component instances to be cached once
they’re created for the first time. To solve this problem, we can wrap
our dynamic component with a element
Wasted 2 days on this issue and then I found the answer just a moment after posting this on StackOverflow. Hope it helps someone.

VueJS: <template> vs <div> or related for grouping elements for conditional rendering

In Vue.js, if you want to conditionally render multiple elements via a v-if/v-else-if directive you can wrap them inside <template> tags and apply the directive to the <template> tag, as explained here. However, you can also do the same with <div> tags wrapping the multiple elements. Are there any noticeable performance benefits to using <template> over <div> or any other similar native HTML5 tag?
I doubt there is a performance change but a big difference is that the <template> node does not appear in the DOM.
This is an important distinction especially when grouping children that are the only valid node types for their parent such as list items, table rows, etc:
This is valid:
<ul>
<template v-if="something">
<li>Text</li>
<li>Text</li>
</template>
</ul>
This is not:
<ul>
<div v-if="something">
<li>Text</li>
<li>Text</li>
</div>
</ul>
I know that the question is quite old, but I found out one more thing
if you use divs - your div will be in DOM, but empty, if v-if is false and it can make some spaces looks like margins
if you use template - you don't have anything in DOM and it just don't appear

Selenium Web Driver - How to narrow down my search using xpath? //* is not sufficient

Firstly thanks for your time.
I am trying to use selenium to find an entry in a listbox of my web app
driver.findElement(By.xpath("//*[text()='" + title + "']")).click();
How would I go about modifying my code to stop searching for everything and search for the following: (myXpath output on my Listbox from firebug/firepath)
<div id="ctl00_ctl00_MainContentPlaceHolder_MainContentPlaceHolderSurvey_upSurveysList">
Thanks again, could you also explain as best as possible your answer, I'm trying to learn this as I will need it a lot going forward
<div id="ctl00_ctl00_MainContentPlaceHolder_MainContentPlaceHolderSurvey_upSurveysList">
Displaying 1-10 of 47 Records
<div class="ListBox">
<div class="divListItem">
<a id="ctl00_ctl00_MainContentPlaceHolder_MainContentPlaceHolderSurvey_lvSurveys_ctrl0_ctl00_btnApplicationID" class="manCensoredName" href="javascript:__doPostBack('ctl00$ctl00$MainContentPlaceHolder$MainContentPlaceHolderSurvey$lvSurveys$ctrl0$ctl00$btnApplicationID','')">11</a>
</div>
<div class="divListItem">
<div class="divListItem">
<div class="divListItem">
<div class="divListItem">
<div class="divListItem">
<div class="divListItem">
<div class="divListItem">
<div class="divListItem">
<div class="divListItem">
C# exemple to click on link:
driver.FindElement(By.Id("ctl00_ctl00_MainContentPlaceHolder_MainContentPlaceHolderSurvey_upSurveysList")).Click();
For doing it in XPath:
driver.FindElement(By.XPath("//*[#id='ctl00_ctl00_MainContentPlaceHolder_MainContentPlaceHolderSurvey_upSurveysList']")).Click();
I would write that one like:
driver.findElement(By.xpath("//div[contains(#id,'upSurveysList')].click();
No need to write the entire id;
Using the "contains" method of selecting xpaths, you can take any partial text out of the div to match it (as long as that text doesn't appear elsewhere in the html, but in your case, I don't think it would).
I shy away from using //* at all times, for it searches through absolutely everything. Depending on the size of your web application, if you know you're accessing a div or a canvas or an img, you can reduce your test times as well as increase xpath accuracy and maintainability.
Also, I know personally, my webapplication is extremely finicky, and the use of Actions and WebElement is the only way to click on the majority of my buttons.
For example:
WebElement mybutton = driver.findElement(By.xpath("//div[contains(#id,'upSurveysList')].click();
Actions actions = new Actions(driver);
actions.moveToElement(mybutton).build().perform();
mybutton.click();
Let me know if that works for you.

Robot Framework Test Data Editor - Click on SPAN/Div not working

I wanted to perform click on Panel element in Selenium Robot Framework
code below:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<span href="#panel" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle panelTitle collapsed" id="panel" aria-expanded="false">Text 1<span class="toggle-icon"><i class="fa fa-plus-circle"></i></span>
</span>
</h4>
</div>
I want perform a click on "span" tag the whenever I write in my selenium robot framework as
Click Link (in first column) id=panel (in second column)
It doesn't work.
In my previous projects it was working fine but I am not able to make it work in this.
This is pretty hard to answer without you providing your test code or more detail but I suspect the element doesn't exist on the page when you try to click it? What error message are you getting? Providing this can help get an answer quicker.
Reading your question closer, are you using the right keyword, are you actually clicking a link? i.e. something contained in link tags? e.g.
all we've done together
Here's a rudimentary example:
Wait Until Page Contains Element panel 10
Click Element panel
This link should help you find further information if you require it: http://robotframework-seleniumlibrary.googlecode.com/hg/doc/SeleniumLibrary.html?r=2.8#Page Should Contain Element
Other libraries contain similar keywords you could use like the Selenium2Library

easy durandal please wait while loading spinner

Is there an easy durandal way to clear the view and put a loading or please wait... on the screen so the user gets some feedback to know that it is working until the ajax content loads?
Right now when I click on a something that navigates to a child route and that child route loads a module that has to do a lot of stuff in activate(), it does not switch the nav or clear the screen or give any feedback to the user that it is working and I see them clicking many times over and over and getting frustrated, then just about when they want to give up, the page loads in fine.
I would like to make this default functionality for my app and not have to do something special in every module or on every page, is that possible?
Thanks.
Have you tried to use router.isNavigating? Original Durandal template contains a spinner like this:
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
A large percentage of the time, what you're looking for can be obtained very simply via:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
The inner div can be any arbitrary markup which will display while the viewmodel is going through activation.
Note that this currently only displays the placeholder content the first time this dom section is composed. If you have a section of your application which is being updated via an observable viewmodel + compose approach, you could use the approach here:
Durandal: Showing a 'LOADING...' during composition
For anyone visiting from the future, this issue might be worth checking out in case native support for this is desired:
https://github.com/BlueSpire/Durandal/issues/414