I have the following nav section in my master template.
I want to set the active class to the correct nav element from the child template.
<ul class="nav nav-pills pull-right">
<li class="active">Home</li>
<li>Browse</li>
<li>Create</li>
<li>Contact</li>
<li>About</li>
</ul>
Is it possible to set the active class on the correct nav option in the master template from the child template?
I would probably try and do this via a ViewModel property instead which can be read as the page renders, but if you're looking for a way to have a variable set by a child that the master view can see, then you can always declare and use a global for example:
<global activeItem="Home" />
can be declared in the master and then:
<set activeItem="Contact" />
in the child view.
Related
I'm recently using cypress and I want to get the array of list but I just want the to get <li> under the class "list" and not including the other children of <li>
I'm using
cy.get('.list >li')
but I'm also getting the children <li> under Home.
<ul class="list">
<li>Home</li>
<ul>
<li>Another One</li>
<li>Another Two</li>
</ul>
<li>Page</li>
<li>Hello</li>
<li>Hi</li>
</ul>
you have two ways to do this
get only li children of parent
cy.get('.list').children('li')
get children by level in dom
cy.get('.list > li')
.its('length')
.should('eq', 2)
You can also use the combination of selector and text using contains. In this way you will only get the intended li element.
cy.contains('li', 'Home')
You can do something like this as well:
cy.get('ul.list > li').each(($ele) => {
cy.log($ele.text()) //prints Home Page Hello Hi
})
Created a small POC from your HTML and this is what I got:
Each tab is a view and each view is loaded and active. When the user closes the tab by clicking on the [x] the view is then destroy and removed. Also, a single view can be loaded multiple times with a different variable, or id. Think multiple documents of the same type.
Views are created by going to a specific route.
This can be done by creating your own viewmodel, adding a collection of views, then adding components as the child views, but this ignores browser history.
After reading it seems the only way to accomplish this is to create your own router. Although I am not new to Aurelia, I am not confident enough to create my own router.
The question is how do you maintain browser history and have multiple active views.
With the help of "Patrick Walters #PWKad" on gitter I was able to put together a proof of concept.
I have the example uploaded to github. Here is the link. https://github.com/BringerOD/AureliaMultiTabExample
The idea is to create routes in your app.js that will handle all of the tabs you will be creating. All of the routes need to point to one viewmodel that will host, compose, and manage them.
You can add more routes or wildcards as you need them. Also if your tabs are complex you could create a hash for a parameter.
I have not figured out how to remove an item from the browser history yet.
Hope this helps someone doing the same thing.
export class App {
configureRouter(config, router) {
config.map([
{ route: ['', 'shell/:section/:viewmodel/:id'], name: 'shell', moduleId: 'shell', nav: false, title: 'shell' }
]);
this.router = router;
}
}
The shell page would then display the tabs and compose the views.
<template>
</ul>
<div class="container-fluid">
<div class="row">
<ul class="nav nav-tabs">
<li repeat.for="workspace of controller.workSpaces" class="${workspace.isActive ? 'active' : ''}" role="presentation">
<a href.bind="workspace.href">
<button class="close" type="button">×</button> ${workspace.viewModel} </a>
</li>
</ul>
<div class="container-fluid" repeat.for="workspace of controller.workSpaces">
<div show.bind="workspace.isActive" class="container-fluid">
<compose containerless view-model="./views/${workspace.section}/${workspace.viewModel}" model.bind="workspace" />
</div>
</div>
</div>
</div>
</template>
For example I want to only select a child node if the other child has the contents "example":
<ul class='thisClass'>
<ul class='OtherChild'>
<strong> capture this text </strong>
</ul>
<label>example</lable>
</ul>
Basically it needs label's inner-text to equal "example" or I do not want the contents of the strong.
I'm fairly new to XPath and I'm not quite sure how to go about this.
You can filter parent <ul> node by it's <label> child like this :
//ul[#class='thisClass' and label='example']/ul/strong
Or you can filter child <ul> node by it's following-sibling :
//ul[#class='thisClass']/ul[following-sibling::label[.='example']]/strong
So i'm using the jQuery waypoints plugin for the navigation of a single page site
Right now it looks like this:
<div class="navigation">
<ul id="navi">
<li data-slide="1">DC3</li>
<li data-slide="2">THE ABOUT</li>
<li data-slide="3">THE WORK</li>
<li data-slide="4">THE CLIENTS</li>
<li data-slide="5">THE WHO</li>
<li data-slide="6">CONTACT</li>
</ul>
and each data-slide moves to a separate div like this:
<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio=".5">
What I want to do is use the same navigation on a second page, that will target each data-slide div on teh original page. Is there a way to do this?
A very simple solution is to used named anchors. In the HTML, next to each element you want to target add a new anchor element like <a id="slide"></a> and then you can link to that anchor's position on the page by using a fragment in your URL like so example.html#slide.
I have a MVC3 application, based on default layout from VS 2010, which I changed to looklike in image below
The submenu area is defined in _layout.cshtml as
<div id="sidebar">
<h3>Entities</h3>
<p></p>
<ul>
#Html.Partial("_EntitiesMenu")
</ul>
</div>
<section id="main">
#RenderBody()
</section>
and the _EntitiesMenu contains entries as below
<li>#Html.ActionLink("Addresses", "Index", "Address")</li>
<li>#Html.ActionLink("Applications", "Index", "Application")</li>
I have a single MapRoute defined as
routes.MapRoute("Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
{ controller = "Home", action = "Index", id = UrlParameter.Optional });
All my entity controllers started from menu are defined standard in Controllers and views in Views.
What I need is to change the app to use a layout as below
When users click Entities app should navigate to myapp/entities/ or myapp/entities/index and it should open a view in main work area that will look like below
Then when users click on right submenus, the url should look like myapp/entities/entity1/index, myapp/entities/entity1/edit/1, etc (exactly like now but "under" entities page.
I defined the Entities controller like
public class EntitiesController : Controller
{
public ActionResult Index()
{ return View();}
}
And it's view looks like
<div id="workarea">
// here should became new Body region, to load all views called from the other controllers
// something like #RenderBody(), but this don't works
</div>
<div id="sidebar">
<h3>Entities</h3>
<ul>
#Html.Partial("_EntitiesMenu")
</ul>
</div>
I don't want to have to make changes to entities controllers or views (or minimal changes if absolutely necessary, because there are lot of them). Can I somehow assign that area as main Body, while under scope of entities? And if user click on top Home / About, it will "unload" the EntitiesView from _layout.cshtml?
Not sure if my question is very clear, but I hope someone will understand what I'm after.
Thank you
Are you talking about #RenderSection http://blogs.msdn.com/b/marcinon/archive/2010/12/08/optional-razor-sections-with-default-content.aspx
I managed (sort of) to accomplish something close to what I need using following approach:
Changed the _layout as below
<section id="main">
<div>
#RenderBody()
</div>
<div>
#RenderSection("EntityCRUD", false)
</div>
</section>
Created the view for Entities as:
#Html.Partial("_PanelEntitiesMenu")
Defined _PanelEntitiesMenu as
<div id="sidebar">
<h3>Entities</h3>
<p></p>
<ul>
#Html.Partial("_EntitiesMenu")
</ul>
</div>
Enclosing the entities views (Index, Edit / Delete / Details / Create) in
#section EntityCRUD
{
#Html.Partial("_PanelEntitiesMenu")
//... original view code
}
Changed all involved views to have the view "body" included in section, and at the beginning of the section I load the panel menu as partial view
#section EntityCRUD
{
#Html.Partial("_PanelEntitiesMenu")
....
}
Not exactly what I wanted, but that's the best I found so far.