Is it possible to pass the bindings from one child to the other child in the parent? The parent doesn't need to use the bindings. It will need to be 2 way.
To put it another way, I need to siblings to share data-bindings.
<app-drawer id="drawer">
<div class='left-bar-container'>
<listings-drawer></listings-drawer>
<!-- Main content -->
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="my-view1" form-loading="{{isLoading}}"
pic="{{pics}}" area-code="{{areaCode}}"></my-view1>
I need <listings-drawer></listings-drawer> to have access to form-loading="{{isLoading}}", pic="{{pics}}", and area-code="{{areaCode}}"
<app-drawer id="drawer">
<div class='left-bar-container'>
<listings-drawer loading="{{isLoading}}"
some-pics="{{pics}}" some-area-code="{{areaCode}}"></listings-drawer>
<!-- Main content -->
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="my-view1" form-loading="{{isLoading}}"
pic="{{pics}}" area-code="{{areaCode}}"></my-view1>
`
There is no reason the above would not work, assuming those property names were used in the listings-drawer element.
Related
I've been having issues trying to change the start point of my tabs for my app bar. I want them to start after the 3rd Column but I haven't been able to make it work.
Code is below:
<template>
<div class = "header">
<v-toolbar app prominent>
<v-layout-row>
<v-layout-column>
<v-img
max-width="100"
src="../../assets/large.png"
/>
</v-layout-column>
<v-layout-column/>
<v-layout-column justify-end>
<HeaderAccount colorTheme="#FFA200" />
</v-layout-column>
</v-layout-row>
<template v-slot:extension>
<v-tabs>
<v-row>
<v-col cols = '3'/>
<v-col cols = '6'>
<v-tab v-for="l in links" :key="l.path" :to="l.path">
{{ l.text }}
</v-tab>
</v-col>
</v-row>
</v-tabs>
</template>
</v-toolbar>
</div>
</template>
Any assistance would be greatly appreciated!
I'm not clearly understand your template in case of layouts, but the main issue is that <v-tab> tag should be a direct child element of <v-tabs>.
Otherwise, the tab styles will not be applied correctly.
So your template should be similar to:
<div id="app">
<v-app id="inspire">
<v-toolbar>
...default toolbar content
<template v-slot:extension>
<v-row>
<v-col cols="3" class="lime accent-1">Three cols item</v-col>
<v-col cols="6">
<v-tabs
dark
background-color="primary"
grow
>
<v-tab>
Item One
</v-tab>
<v-tab>
Item Two
</v-tab>
<v-tab>
Item Three
</v-tab>
</v-tabs>
</v-col>
</v-row>
</template>
</v-toolbar>
</v-app>
</div>
Test this at CodePen.
I'm using the app-drawer-layout from Polymer App Toolbox, and instead of having a fixed title in <div main-title>My App</div>, I'd like to have it work dynamically with the iron-pages-navigation.
Ideally I'd like to specify the title in each element loaded in iron-pages, but defining it in the navigation is also a solution. However, I'm kinda stuck as none of the attempts I've made seems to work.
My code looks like this:
<app-header condenses fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<moso-profile name="profile"></moso-profile>
<moso-resume name="resume"></moso-resume>
<moso-portfolio name="portfolio"></moso-portfolio>
<moso-contact name="contact"></moso-contact>
</iron-pages>
Now, I've tried using the <content select=".page-title"></content> (Polymer Docs) and then have a <div class="page-title">New title</div> in each loaded element. Didn't work.
I've also tried adding a title attribute to each element in iron-pages (like so: <moso-profile title="Profile" name="profile"></moso-profile>) and then try to one/two way bind it with [[page.title]], no luck either.
Am I doing something wrong? Or is it not possible anymore?
Why not something like this?
<app-header condenses fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
<div main-title>{{page}}</div>
</app-toolbar>
</app-header>
<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
<moso-profile name="profile"></moso-profile>
<moso-resume name="resume"></moso-resume>
<moso-portfolio name="portfolio"></moso-portfolio>
<moso-contact name="contact"></moso-contact>
</iron-pages>
or if you want to control the title even more you can use a computed function:
<app-header condenses fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
<div main-title>{{_computeTitle(page)}}</div>
</app-toolbar>
</app-header>
and in javascript:
_computeTitle: function(page) {
if (page == 'profile') {
return 'My Profile';
}
...
}
In Polymer 1.2, How do I use content in dom-repeat?.
//component
<dom-module id="data-stream">
<template>
...
<div class="data-stream-list">
<template is="dom-repeat" items="[[stream]]">
<div class="data-stream-item">
<content></content>
</div>
</template>
</div>
</template>
...
</dom-module>
//used as
<data-stream>
<!--// template for data stream item -->
<div class="custom-data-stream-item">[[item]]</div>
</data-stream>
Supposing i had a hypothetical stream of [one, two, three, four] this returns
...
<div class="data-stream-list">
<div class="data-stream-item">
<div class="custom-data-stream-item"></div>
</div>
<div class="data-stream-item"></div>
<div class="data-stream-item"></div>
<div class="data-stream-item"></div>
</div>
...
Implying the light DOM is stamped at least once but not repeated. Neither does there seem to be any binding. Not as expected.
That is just not supported. If you have several <content> elements without a selector, all children will be projected to the first <content> element.
If you add a select="someSelector" where someSelector is different for each <content> element and matches with a child each then it might work (not sure if dynamically added <content> elements are supported at all).
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<bortini-home></bortini-home>
</paper-material>
</section>
<section data-route="tv">
<paper-material elevation="1">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="tvList">
<paper-material elevation="1">TV list</paper-material>
</section>
<section data-route="tvAdd">
<paper-material elevation="1">TV Add</paper-material>
</section>
<section data-route="tvEdit">
<paper-material elevation="1">TV edit</paper-material>
</section>
<section data-route="tvView">
<paper-material elevation="1">TV details</paper-material>
</section>
</iron-pages>
</paper-material>
</section>
<section data-route="users">
<paper-material elevation="1">
<h2 class="paper-font-display2">Users</h2>
<p>This is the users section</p>
Rob
</paper-material>
</section>
<section data-route="user-info">
<paper-material elevation="1">
<h2 class="paper-font-display2">
User:<span>{{params.name}}</span>
</h2>
<div>This is <span>{{params.name}}</span>'s section</div>
</paper-material>
</section>
<section data-route="contact">
<paper-material elevation="1">
<h2 class="paper-font-display2">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
Also my route looks like -
window.addEventListener('WebComponentsReady', function () {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
page('/', function () {
app.route = 'home';
});
page('/tv', function () {
app.route = 'tvAdd';
});
page('/tvAdd', function () {
app.route = 'tvAdd';
});
page('/users', function () {
app.route = 'users';
});
page('/users/:name', function (data) {
app.route = 'user-info';
app.params = data.params;
});
page('/contact', function () {
app.route = 'contact';
});
// add #! before urls
page({
hashbang : true
});
});
I am using "page.js" for routing.
When I press "tv" menu, it should show "tvAdd", but it just shows empty screen.
Thanks in advance.
The reason this is happening is because the two <iron-pages> elements are both bound to the same property. To elaborate further, here's an example:
route changes to tv
The parent <iron-pages> element has its selected property changed to tv
The tv page is selected in the parent <iron-pages>
The child <iron-pages> has its selected property changed to tv
There is no tv page in the child <iron-pages>, so nothing is selected inside it and it remains blank.
The same goes for if you were to set route to one of the route names that you use in the child <iron-pages>.
To solve this problem, you must bind both of the <iron-pages> to different properties, the first of which would determine which parent route you are on, and the second of which would determine the child route, if any.
Afterwards, you would just set two properties in your routing callbacks.
Some pseudocode:
<iron-pages attr-for-selected="data-route" selected="{{route}}">
...
<section data-route="tv">
...
<iron-pages attr-for-selected="data-route" selected="{{childRoute}}">
...
<section data-route="tvList">
page('/tvAdd', function () {
app.route = 'tv';
app.childRoute = 'tvAdd';
});
Polymer: 1.0.3
More routing: 1.0.0
Having some issues with Polymer "more-routing". Those are -
1) Get this log on console -
[dom-bind::_annotatedComputationEffect]: compute method `urlFor` not defined
2) First level routing works (even though I get those error/warning messages). But second level routing (i mean nested routing) does not work. On "users" page pressing the name doesn't take me to "user-info" page. In fact the name does not appear as a link, it appears as a text. Here is my code -
My "routing.html"--
<link rel="import" href="../bower_components/more-routing/more-routing.html">
<more-routing-config driver="hash"></more-routing-config>
<more-route name="home" path="/"></more-route>
<more-route name="users" path="/users">
<more-route name="user-info" path="/:name"></more-route>
</more-route>
<more-route name="contact" path="/contact"></more-route>
My "index.html" ---
<more-route-selector>
<paper-menu class="list" on-iron-select="onMenuSelect">
<a route="home" href="{{urlFor('home')}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a route="users" href="{{urlFor('users')}}">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a route="contact" href="{{urlFor('contact')}}">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</more-route-selector>
<more-route-selector selectedParams="{{params}}">
<iron-pages>
<section route="home">
<paper-material elevation="1">
<bortini-home></bortini-home>
</paper-material>
</section>
<section route="users">
<paper-material elevation="1">
<h2 class="paper-font-display2">Users</h2>
<p>This is the users section</p>
Rob
</paper-material>
</section>
<section route="user-info">
<paper-material elevation="1">
<h2 class="paper-font-display2">
User:<span>{{params.name}}</span>
</h2>
<div>This is <span>{{params.name}}</span>'s section</div>
</paper-material>
</section>
<section route="contact">
<paper-material elevation="1">
<h2 class="paper-font-display2">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</more-route-selector>
With 1.0 (perhaps earlier), Polymer stopped supporting expressions inside data-bindings (Migration Guide - Data binding). Thankfully, you can still call a function in a binding (called a "computed binding").
From what I can tell, the urlFor() method must be slightly too complex to work as a computed binding (the params object isn't a dependent property). I was able to make it work by wrapping urlFor() in a simpler function - one that works as a computed binding - something like this:
<more-routing-config driver="path"></more-routing-config>
<more-route name="users" path="/users">
<more-route name="user-info" path="/:name"></more-route>
</more-route>
<template is="dom-bind">
Rob
</template>
<script>
var template = document.querySelector('template');
template.makeUrl = function(route, name) {
return MoreRouting.urlFor(route, {name:name});
};
</script>
You can also pass variables in your computed binding, as long as they're dependent properties, like the item in a repeating template
<template is="dom-bind">
<template is="dom-repeat" items="{{users}}">
{{item.name}}
</template>
</template>
<script>
var template = document.querySelector('template');
template.makeUrl = function(route, user) {
return MoreRouting.urlFor(route, {name:user.name});
};
</script>