In inspiration from Sarah Drasner's Smashing Magazine article Replacing jQuery with Vue, I've replaced all of my jQuery with Vue in my Wordpress theme. Things are going nicely as I've already replaced functionality for modals, form validation/submission, at the like. I even got a boost in my page speed grade from Google's page speed insights tool.
The last piece of my puzzle is finishing off my navigation menu. The menu is built and working, but I'm not happy with it. My primary dissatisfaction is in conditionally rendering submenus better. For example, menu items without children receive an empty child:
<ul class="submenu"></ul>
Here's what I have so far:
Here's the shape of my Nav menu data: https://api.myjson.com/bins/jfld4
Important property definitions:
"obeject_id" is a unique indentifier
"post_parent" refers to the nav item's parent "object_id"
Notice notice top level menu items have "post_parent: 0"
Here's my Vue code for rendering the menu:" https://codepen.io/JosephAllen/pen/zLQqRr?editors=0011
<ul class="menu" id="primary-menu">
<menu-item
v-for="item in navItems"
v-if="item.post_parent == 0"
:key="item.object_id"
:class="{active: item.active}"
v-bind:url="item.url"
v-bind:object_id="item.object_id"
v-bind:post_parent="item.post_parent"
v-bind:title="item.title">
<ul class="sub-menu">
<menu-item
v-for="subItem in navItems"
:key="subItem.object_id"
v-if="subItem.post_parent == item.object_id"
v-bind:object_id="subItem.object_id"
v-bind:url="subItem.url"
v-bind:ID="subItem.ID"
v-bind:post_parent="subItem.post_parent"
v-bind:title="subItem.title">
</menu-item>
</ul>
</menu-item>
</ul>
On your <ul class="sub-menu"> element, include v-if or v-show with a test if the item contains any subItems (e.g. <ul class="sub-menu" v-show="hasSubItems"> once you've computed hasSubItems of course). Check out conditional rendering in the Vue docs.
Related
I'm using RiotJS v3.9
I've written a custom tag that accepts a few opts. The problem is that the markup it generates includes all of those opts on the outermost element, in addition to the interior tags where I explicitly deposit them. I do not want any opts to appear on the top element unless I make that happen.
In this case, my custom tag display a list of items. One of the opts it accepts is the value for a specific data- attribute on each list item. So, I want data-something={opts.itemSomething} to appear on each list item, but I do not want that to appear on the wrapper.
// my-list.tag
<my-list>
<ul data-something={ opts.something }>
<li
each={ item in opts.items }
data-something={ parent.opts.itemSomething }
>
{ item }
</li>
</ul>
</my-list>
Using it:
<my-app>
<my-list
something="parent-value"
item-something="child-value"
items={['one', 'two', 'three']}
/>
</my-app>
What it emits into the page:
<my-list something="parent-value" item-something="child-value">
<ul data-something="parent-value">
<li data-something="child-value"> one </li>
<li data-something="child-value"> two </li>
<li data-something="child-value"> three </li>
</ul>
</my-list>
I don't want the emitted <my-list> tag to have either the parent-value or the child-value on it. I only want those attributes to appear on the <ul> and <li>, like I coded it.
// bad output
<my-list something="parent-value" item-something="child-value">
// good output
<my-list>
Is this possible?
Also, I know from working with React that I'm likely to encounter future cases where I want some of the opts to appear on the wrapper while hiding others. So, ideally I'd like to know how to control this behavior on a per-opt basis.
you can remove the unwanted attributes in both the "updated" and "mount" event.
check this demo
However I strongly suggest you to switch to riot#5!!
i got a simple static site with a main navigation. working with the metalsmith generator.
Is there a native way to set current menu items active?
My current unautomated solution:
I just made a workaround like following.
A MD file page1.md as source of content with some variables i can define at top:
---
title: this is the site title
currentPage1: current
layout: main.html
---
<article class="featurette">
<p class="lead">Some content text...</p>
</article>
and my layout HTML file main.html. Where handlebars is used as engine.
i just post the part of the menu here:
<ul class="nav">
<li>
Link to Page1
</li>
<li>
Link to Page2
</li>
</ul>
both are going through the metalsmith rendering.
I got a current class on the Page1 in the menu.
Question
My solution is working so far, but as my site scales. I need to define the "current" for every site again and again. If I don't watch out this will lead to misconfiguration...
I do like to have freedom on my main navigation markup, as there are some specialities in. So I'm fine with creating this for new pages by myself.
Can i set active menu items somehow with the metalsmith-permalinks or metalsmith-canonical plugin or does there exists a metalsmith plugin suited for this case or maybe with another clever JS manipulation?
Use metalsmith-collections to create a collection of pages
.use(collections({
pages: {
pattern: '*.html'
}
}))
Then in your template loop through them to create your links:
{{#each collections.pages}}
<li>
<a href="{{path}}" {{#if_eq ../id this.id}} class="active" {{/if_eq}}>{{title}}</a>
</li>
{{/each}}
You will need to register a block helper like this: Handlebars.js if block helper ==
Make sure each page ID is unique.
For example:
---
id: phillip
layout: base.hbs
tagline: I haven't thought of one.
pagename: phils page
href: /phil/
navorder: 3
private: true
---
how to write controller code to shared layout page,
i want to get menu from database to layout,
am able to get menu in normal view page,
this is my layout page
<pre lang="html"> <div style="width:1230px">
<script type="text/ng-template" id="treeMenu">
{{menu.Name}}
<ul ng-if="(SiteMenu | filter:{ParentID : menu.Id}).length > 0">
<li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.Id} : true" ng-include="'treeMenu'"></li>
</ul>
</script>
<ul class="main-navigation">
<li ng-repeat="menu in SiteMenu | filter:{ParentID : 0} : true" ng-include="'treeMenu'"></li>
</ul>
You should isolate this in Partial and use RenderAction in your layout page
Steps in nutshell :
Create Action in some controller "let say CommonController" called SiteMenu for example.
Put the code that will bring the Data from Database and map it to suitable ViewModel to represent your Menu items.
The Action should return PartialView instead of View.
Consider this Action regardless of your main layout. So just create a special view for it and put the logic of Html in that view.
In suitable place in your main layout just use #Html.RenderAction("SiteMenu ","Common")
for more information read about RenderPartial vs RenderAction vs Partial vs Action in MVC
Given the following:
<div id="#my-container">
<div class="title">Companies</div>
<div class="tab active tab-apple">Apple</div>
<div class="tab tab-google">Google</div>
</div>
When page is loaded without any tab clicks yet, whichever tab with the default active class, needs to go in the .title div. For the example above, <div class="title">Apple</div>
On click of a tab, the class is switched to active, and vue.js needs to update the .title div once again.
How can this be done with vue.js? I've tried but not able to get it to work as intended.
The answer by David is one way to do it. But Vuejs offers in-line computations for this. So, no need to hook into any CSS event. Here's some code to explain:
Create a data property active_tab, just like David mentioned. And then bind it's value just like he's done it. In your tabs, add an click event and at that event, assign appropriate value to active_tab.
<div class="tab active tab-apple" #click="active_tab = Apple">Apple</div>
<div class="tab tab-google" #click="active_tab = Google">Google</div>
Now, to dynamically assign the active class to the respective tab, make the class attribute, a computed property, like this:
<div
:class="['tab', active_tab == 'Apple' ? 'active' : '', 'tab-apple']"
>
Apple
</div>
What this code is basically doing is, :class makes class a computed property. Then the commas in the array divide the statement. So, the computation will always add tab and tab-apple classes. But, only if active_tab == 'Apple' then ? add 'active' else : add ''
Not sure which CSS framework you are using, but normally I hook into the events thrown by the tab switching (many CSS frameworks provide this access). Once hooked into it, you can write a Vue custom directive that will take that event and use it to update a VM attribute that indicates which tab is active.
Then you can use normal mustache templating to get it into your template:
<div class="title">{{ active_tab }}</div>
I can easily show a loading message while the activate method is doing its thing like so:
<div data-bind="compose:ActiveVm">
<div class="text-center" style="margin : 75px">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
However if I then update my ActiveVm property with a different viewmodel, the splash content does not show. I understand that the splash content is only designed to show on 'initial' load, but what options do I have for displaying such a message when transitioning from one viewmodel to another?
Note that this composition does not participate in routing...
Update: Related durandal issue here which might be of value to future visitors: https://github.com/BlueSpire/Durandal/issues/414
This begs for a comment of 'what have you tried?' but given that I could see the benefit of this for future users I wanted to throw in my $0.02 -
The splash displays on your screen until Durandal loads up the application and replaces the div with id="applicationHost" 's content with the shell view and the subsequent views that are loaded. If you wanted to make this a re-usable component one thing that you could do is to take that Html.Partial view that is being loaded and create your own view inside of your app folder in your Durandal project.
For example you would create a new HTML view inside of your app folder -
splashpage.html
<div class="splash">
<div class="message">
My app
</div>
<i class="icon-spinner icon-2x icon-spin active"></i>
</div>
And then compose it from your shell -
<div data-bind="if: showSplash">
<!-- ko compose: 'splashpage.html' -->
<!-- /ko -->
</div>
And in your view model you would toggle the observable showSplash whenever you want to show / hide it -
var showSplash = ko.observable(false);
var shell = {
showSplash: showSplash
};
return shell;
And you could call that from your activate methods inside your other view models like this -
define(['shell'], function (shell) {
function activate() {
shell.showSplash(true);
// do something
shell.showSplash(false);
}
});
This sounds to me like a scenario where a custom transition may be useful. When the composition mechanism switches nodes in and out of the DOM, it can use a transition.
This page, under Additional Settings>Transition (about halfway down) describes a custom transition: http://durandaljs.com/documentation/Using-Composition/