I'm trying to create a dynamic menu by looping over all routes of the router.
Simplified class (TypeScript flavour):
#inject(Router)
export class NavBar {
constructor(private router: Router) {}
}
Simplified view:
<div repeat.for="route in router.routes">
<a route-href="route: ${route.name}">${route.title}</a>
</div>
Although it works if I simply print out the properties of the routes in the loop, the approach doesn't seem to be working for the route-href attribute. Any ideas how I can make this work?
Change this:
route-href="route: ${route.name}"
to this:
route-href="route.bind: route.config.name"
Interpolation binding only works on single-value attributes, not on custom attributes with bindable properties.
And just in case you were not aware: the router.routes property is a list of type NavModel, which has a property config which contains the RouteConfig.
In the nav bar you do not need to use route-href, you could do:
<ul class="nav navbar-nav">
<li repeat.for="route of router.navigation" class="${row.isActive ? 'active' : ''}">
<a data-toggle="collapse" data-target="#bs-example-navbar-collapse-1.in" href.bind="route.href">${route.title}</a>
</li>
</ul>
A route-href can be used however if you want the user to click on a specific link that requires a parameter.
<tr repeat.for="log of logs">
<td><a route-href="route: log-details; params.bind: { logId: log.id }">${log.id}</a></td>
</tr>
Related
I Just want to have dynamic tailwind classes values that changes when change a data value, it is possible to do it using tailwind?
In my example I have a double side menus and a main content, I want to set the menus width and programmatically change the margins that have the main content.
I don't know why but tailwind doesn't apply my crafted classes even if in the browser shows the right class in the div element.
Left side menu:
(right is equal)
<nav
class="fixed overflow-x-scroll bg-gray-700 top-16 h-screen"
:class="classes.leftSidebar"
>
<h1 class="text-xl text-center font-bold pt-5">Menu</h1>
<ul class="list-none text-white text-center">
<li class="my-8">
Teams
</li>
<li class="my-8">
Projects
</li>
<li class="my-8">
Favourites
</li>
<li class="my-8">
Notifications
</li>
<li class="my-8">
Members
</li>
</ul>
</nav>
Content:
<main :class="classes.main">
<slot></slot>
</main>
Script:
data() {
return {
showingNavigationDropdown: false,
sidebar_left_w: 64,
sidebar_right_w: 64,
}
},
computed: {
classes() {
return {
leftSidebar: `w-[${this.sidebar_left_w}rem]`,
rightSidebar: `w-[${this.sidebar_right_w}rem]`,
main: [`mr-[${this.sidebar_right_w}rem]`, `ml-[${this.sidebar_left_w}rem]`],
}
}
},
I also tried leftSidebar: `w-${this.sidebar_left_w}`, but same results
This is not possible with Tailwind CSS
The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.
If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:
Don't construct class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
<!-- This will not work -->
In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.
Instead, make sure any class names you’re using exist in full:
Always use complete class names
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
As long as you always use complete class names in your code, Tailwind will generate all of your CSS perfectly every time.
source
In my Laravel 5/vuejs 2/ VueRouter / app I have navigation area :
<li class="navigation_item_top">
<router-link :to="{ name: 'DashboardIndex' }" class="a_link">
Dashboard
</router-link>
</li>
<li class="active navigation_item_top" >
Customers
<ul class="collapse list-unstyled ml-2" id="backendCustomersSubmenu">
<li class="mt-2">
<router-link :to="{name : 'listCustomers'}" class="a_link">
Customers
</router-link>
</li>
<li class="mt-2">
<router-link :to="{name : 'listCustomers', params: { filter: 'new' } }" class="a_link">
New Customers
</router-link>
</li>
<li class="mt-2">
<router-link :to="{name : 'listCustomers', params: { filter: 'inactive' } }" class="a_link">
Inactive Customers
</router-link>
</li>
</ul>
</li>
Where there are 3 links listCustomers with different default filter opening page and it works ok if from
DashboardIndex page I move to any listCustomers.
But it does not work if from opened listCustomers page I open listCustomers with other filter.
I suppose as VueRouter considers all listCustomers as 1 page.
If there is a way to make it and selecting other listCustomers to reopen filter?
Not sure if i understand your Q very well, but i think you want to:
Append query to url. e.g company.com/listCustomers?filter=new
Make Vue notice the change and do something with that change
If that's the case then try this :
<template>
<--! HTML HERE -->
</template>
<script>
export default {
watch: {
'$route'(to, from){
// you don't need this but just in-case.
//this.$forceUpdate();
//If you're using query like ?filter=new, this should work
if (this.$route.query.filter) {
if (this.$route.query.filter== 'new') {
}else{
}
}
}
}
}
</script>
N.B
If you want use parameters it means you expect your url to be:
domain.com/listCustomers/inactive.
so just try the basics and link like this:
<router-link to="/listCustomers/inactive">
or
<router-link to="/listCustomers/new">.
And if your want queries your url is going to be:
domain.com/listCustomers?filter=new.
and you should pass exact prop to activate active page style.
then you need to watch for changes in the watch hook just like i did my answer
Now all the been said,
linking with parameters should work without any problem, but if you decide to use any Navigation Guards technique, like router.afterEach.
Please do not forget to add next(), to allow it to move on after your code. otherwise it won't navigate.
read Navigation Guards.
I hope you will understand.
I am trying to test my vuejs component via jest that contains materialize select.
When performing a component test, I get the following error in materialize.js:
TypeError: Cannot set property 'tabIndex' of null at Dropdown._makeDropdownFocusable
How fix this error?
This problem can happen when the input field is not wrapped inside a div with the class input-field:
<div class="input-field">
<input type="text" class="autocomplete"></input>
</div>
Adding a div with the class "input-field might solve this problem.
use id selector instead class selector. for example call dropdown like this :
html :
<a class='dropdown-trigger' id="dropdowner" href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
js:
$('#dropdowner').dropdown();
Can only be used once.
data-target="name_target" must not be repeated
Exam1.❌
<nav>
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" href="#!" data-target="name_target1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
<!-- Dropdown Structure -->
<ul id="name_target1" class="dropdown-content">
<li>one</li>
<li>two</li>
</ul>
Exam2.✔️
<nav> <div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" href="#!" data-target="name_target2">Dropdown<i enter code here class="material-icons right">arrow_drop_down</i></a></li>
</ul> </div> </nav> <ul id="name_target2" class="dropdown-content"> <li>one</li> <li>two</li> </ul>
When I ran into this issue I was trying to create the whole dropdown list dynamically in JS. The fix for me was creating the list and any default list elements in HTML:
<div id="select1" class=\"input-field col s12\">
<select>
<option value="" selected>Default</option>
</select>
<label>Test</label>
</div>
Then appending any dynamic values in JS:
contents.forEach(function(content) {
var buffer = "<option></option>";
var template = $(buffer);
$(template).text(content);
$("select1").find("select").append(template);
});
$("select").formSelect();
pre 1.0.0 you would use data-activates, if data-target is not specified you will get this error
My problem was, that jQuery object was not attached to the DOM yet, so inner materialise code could not init element due to inability to find element by ID:
// materializecss initing dropdown (in my case for input autocomplete), where `t` is the input element
i.id = M.getIdFromTrigger(t),
i.dropdownEl = document.getElementById(i.id),
i.$dropdownEl = h(i.dropdownEl),
M.getIdFromTrigger(t) returned some random ID (not the one I provided) and dropdownEl was inited with null, and later method _makeDropdownFocusable failed on using it `this.dropdownEl.tabIndex = 0
So my problem code looked like this:
let root = $('#root'); // root in the DOM already
let wrapper = $('<div>'); // wrapper is just created and NOT attached to the DOM yet
let input = $('<input>').appendTo(wrapper); // creating input and attaching to the wrapper, but still not in DOM
initAutocomplete(input) // M.Autocomplete.init logic here FAILS
root.append(wrapper) // too late, error above
So the quick fix is to append elements first and only than do M.Autocomplete.init
I just stumbled this issue too while using Materializecss for my Vue project. As mentioned by sajjad, using id selector instead of class works. However, this is problem for initializing multiple dropdown, since each dropdown must have unique ID.
The way I solve this is just by selecting all the elements with the '.dropdown-trigger' class, and initialize every each of those. It works for me.
$.each($('.dropdown-trigger'), function(index, value) {
$(value).dropdown();
});
I would like the odd table rows to bee colored. Angular has ng-class-odd and ng-class-even that works inside the scope of ng-repeat.
Can I somehow get the index of the repeat-for function in Aurelia?
There is $even and $odd properties that is available on the items in an repeat.for binding.
You could conditionally apply a class like this -
<ul>
<li repeat.for="item of items" class="${ $even ? 'my-class': '' }"></li>
</ul>
This is my shell.html defining a navbar, pretty much lifted straight from the tute.
<div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul class="nav" data-bind="foreach: router.navigationModel">
<li data-bind="css: { active: isActive }">
<a data-bind="attr: { href: hash }"><span><i data-bind="attr: { class: glyph }"></i> <span data-bind="text: title"></span></span></a>
</li>
</ul>
<span class="nav">
Welcome <span data-bind="text: app.user.name()"></span>
</span>
<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
</div>
</div>
<div class="container-fluid page-host" data-bind="router: { transition:'entrance' }"></div>
</div>
This is the problem part:
<span data-bind="text: app.user.name()"></span>
user is a property I add to app right after it's created. It is updated by the view models for log in and log out.
To get that binding to work I need to bring the object into scope in the view model. Normally I would do that like this: var app = require('durandal/app');. In most view models this is no problem. But view management gets seriously messed up when I do it in shell.js.
All I'm trying to do is fish out some app state to indicate whether the user is currently logged in.
There are two possible solutions
Get app into scope somehow
Manage application state in some other way that is in scope in shell.js
I'm sure this is trivial to old hands; I await your wisdom. Searching google didn't work well because "app" is way too broad a search term.
I dodged the problem by tacking user onto document instead of app, but that's hideous. I'm all ears for the right way to do this.
Interestingly, HTML5 browsers define sessionStorage for exactly the purpose to which I polluted document. If you do this in your boot code
if (typeof(document.sessionStorage) == undefined) document.sessionStorage = {};
then you can assume it exists in the rest of your app.
We can't count on browser support, but it's not hard to check and if necessary create it. If you look up sessionStorage you'll see a warning that the contents will be lost at the next page load, but in a SPA that matters not at all.
One way to accomplish this (most probably the right one), would be using a shared AMD module as discussed in Session Data with Durandal.
What we did in our Durandal app is create a separate static module called config, which contains, among other properties, an observable property called userName.
At the top of your module (the shell.js file, in this case), put the following:
define([
'durandal/system',
'durandal/activator',
'plugins/router',
'durandal/app',
...
'config'
],
function(system, activator, router, app,..., config) {
}
);
The config module should be static, which means that it should return an object literal, not a constructor function.
Your config module might look something like this (bare bones):
define('config', ['knockout'],
function(ko) {
var userName = ko.observable('');
return {
userName: userName
};
}
);