I have a problem with passing the category variable inside the <template> tag wrapped by the core-list.
I tried different binding approaches, but no luck. {{category}} corretcly appears outside the 2nd template tag.
<polymer-element name="library-list" attributes="category">
<template>
<style>
...
</style>
<service-library id="library" items="{{items}}"></service-library>
<core-list id="list" data="{{items}}" on-core-select="{{onClick}}">
<template>
<div class="item {{ {selected: selected} | tokenList }}" hidden?="{{category == type}}">
<div class="message">
<span class="title">{{title}}</span>
</div>
</div>
</template>
</core-list>
</template>
Maybe you want to try the injection approach.
<core-list data="{{data}}">
<template>
<div class="item {{ {selected: selected} | tokenList }}">
<span>{{foo}}-<b>{{category}}</b></span>
</div>
</template>
</core-list>
...
data.push({
foo: 999,
category:this.category,
...});
jsbin demo http://jsbin.com/mokok
I couldn't find a good solution, so I filtered the data instead that the core-list displays.
Related
I'm trying to pass slot into the slot but child component which requires passed down slot doesn't see it.
In the child (TheTable) I have table component from Core UI for Vue (CDataTable) which requires certain slots which I want to pass from a parent:
<CDataTable
class="overflow-auto"
:items="this.items"
:fields="fieldData"
:sorter="{ external: true, resetable: true }"
:sorter-value="this.sorterValue"
:table-filter="{ external: true, lazy: false, placeholder: 'Enter here', label: 'Search:'}"
:responsive="false"
:loading="this.loading"
:hover="true"
:items-per-page-select="true"
:items-per-page="this.perPage"
#pagination-change="paginationChanged"
#update:sorter-value="sorterUpdated"
#update:table-filter-value="filterUpdated"
>
<slot name="requiredTableFields"></slot>
</CDataTable>
In the parent component I have:
<TheTable
v-bind:fields="fields"
v-bind:endpoint-url="endpointUrl"
>
<template slot="requiredTableFields">
<td slot="name" slot-scope="{item}">
<div>{{ item['attributes.email'] }}</div>
<div class="small text-muted">
{{ item['attributes.firstname'] }} {{ item['attributes.lastname'] }}
</div>
</td>
<td slot="registered" slot-scope="{item}">
<template v-if="item['attributes.created_at']">{{ item['attributes.created_at'] }}</template>
<template v-else>Not setup yet</template>
</td>
</template>
</TheTable>
Is there any way to make it work?
Cheers,
Casper
Merging the underlying slots into a single requiredTableFields slot isn't going to work because there's no (easy) way to break the child slots back out once they've been merged.
Instead you can just keep the slots separate:
<TheTable ...>
<template v-slot:name="{ item }">
<td>
...
</td>
</template >
<template v-slot:registered="{ item }">
<td>
...
</td>
</template>
</TheTable>
This is passing two scoped slots, name and registered, into TheTable.
Assuming you don't want to hard-code the slot names into TheTable you'd then need to iterate over the $scopedSlots to include them dynamically.
<CDataTable ...>
<template v-for="(x, slotName) in $scopedSlots" v-slot:[slotName]="context">
<slot :name="slotName" v-bind="context" />
</template>
</CDataTable>
Some notes on this:
x is not used, we just need to loop over the slot names.
The 'data' associated with the scoped slot is referred to as context and is just passed on.
If the slots weren't scoped slots it'd be slightly different. We'd iterate over $slots instead and remove all the parts that refer to context.
There is a : at the start of the :name attribute as we want to pass a dynamic name. It is an unfortunate coincidence that one of the slots in the original question is also called name, potentially leading to some confusion here.
The v-bind="context" part is analogous to the JavaScript spread operator, if that makes it any clearer. Think of it as attributes = { name: slotName, ...context }.
Below is a complete example illustrating this technique outlined above. It doesn't use CDataTable but the core principle for passing on the slots is exactly the same.
const Comp2 = {
template: `
<div>
<h4>Left</h4>
<div><slot name="top" item="Red" /></div>
<h4>Right</h4>
<div><slot name="bottom" item="Green" /></div>
</div>
`
}
const Comp1 = {
template: `
<div>
<comp2>
<template v-for="(x, slotName) in $scopedSlots" v-slot:[slotName]="context">
<slot :name="slotName" v-bind="context" />
</template>
</comp2>
</div>
`,
components: {
Comp2
}
}
new Vue({
el: '#app',
components: {
Comp1
}
})
<script src="https://unpkg.com/vue#2.6.11/dist/vue.js"></script>
<div id="app">
<comp1>
<template v-slot:top="{ item }">
<button>Slot 1 - {{ item }}</button>
</template>
<template v-slot:bottom="{ item }">
<button>Slot 2 - {{ item }}</button>
</template>
</comp1>
</div>
I'm using amp-list together with amp-mustache templates to display a list of blog articles on my AMP page, like this example:
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="/data/blog-list.json"
>
<template type="amp-mustache">
<div class="blogitem blogitem--horizontal">
{{title}}
...
</div>
</template>
</amp-list>
However, I need the first item in my list to appear different than the others. I have slightly different html for the first item. Is there some kind of loop variable available that I can use to do something like this:
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="/data/blog-list.json"
>
<template type="amp-mustache">
{{#if loop->first}}
<div class="blogitem blogitem--vertical">
{{title}}
...
</div>
{{#else}}
<div class="blogitem blogitem--horizontal">
{{title}}
...
</div>
{{/if}}
</template>
</amp-list>
Or is there another way to accomplish this?
Thanks!
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).
Per the template below, I am trying to keep words from breaking using CSS white-space tags. The problem is Polymer seems to automatically close the open tags I am using as the wrapper. Any help?
<template is="dom-repeat" items="{{getHiddenStrArr(diffObj.value)}}" as="char" >
<template is="dom-if" if="{{!index}}">
<together>[
</template>
<template is="dom-if" if="{{!isASpace(char)}}">
<span class="added-char">{{char}}</span>
</template>
<template is="dom-if" if="{{isASpace(char)}}">
]</together>
<span class="added-char"> </span>
<together>[
</template>
<template is="dom-if" if="{{isEndOfList(diffObj.value, index)}}">
]</together>
</template>
</template>
Resulting HTML:
I know the logic is correct as I used "[" and "]"to represent what the tags are doing visually. Such as:
[ - - - - ] [ - - - ] [ - - ! ]
I'm working on a set of conditional views based on the data available in a JSON object - effectively, show a media view if we have media to show, show a document view if we have merely text information to show, etc. The approach I've been using to date uses hasOwnProperty() to check the JSON object to determine the available data and work out the view template based on what's there.
I've implemented something as a barebones version of this, but now I get nothing at all. The if seems to just kill the nested templates. Here's what I'm trying:
<template bind if="{{ posts[postid].hasOwnProperty('video') }}">
<div class="tileHeader">Posted by #{{ posts[postid].creator_id }} <time-ago datetime="{{ posts[postid].creation_date }}"></time-ago></div>
<div class="tile">
<div class="heroTop" style="background-image: url({{ posts[postid].body }}) no-repeat"></div>
<div class="heroBottom">
<div class="headline">{{ posts[postid].url_title }}</div>
<div class="postDesc">{{ posts[postid].url_description }}</div>
</div>
<div class="attribution">
{{ posts[postid].url }}
</div>
</div>
</template>
<template bind if="{{ posts[postid].hasOwnProperty('image') }}">
<div class="tileHeader">Posted by #{{ posts[postid].creator_id }} <time-ago datetime="{{ posts[postid].creation_date }}"></time-ago></div>
<div class="tile solo-view">
<div class="heroSolo">
{{ posts[postid].body }}
</div>
<div class="attribution">
{{ posts[postid].url }}
</div>
</div>
</template>
Two questions:
1. Can this if statement work in this context, or does this need to be re-built as a filter?
2. What happens in the case where both ifs are true for a given render?
Ok, this seems to be working. Is it messy? Yes, definitely.
Effectively, from my API I get a slew of post_ids that I need to format differently depending on what I'm finding. Trying to use something like JSON.hasOwnProperty didn't work (don't know why) so I'm resorting to assigning a variable based on a separate discovery function.
Is there a better way to do this? Of this, I'm certain. If you've got a better approach, please do let me know. But here's what I've come to:
<template repeat="{{ postid in postids }}">
<core-ajax id="postdetail" url="api/1/posts/{{ postid }}" data-postid="{{ postid }}" postid="{{ postid }}" handleAs="json" method="GET" auto on-core-response="{{ updatePostDetail }}"></core-ajax>
<template if="{{ posts[postid].displaytype == 'articleImage' }}">
<div class="tileHeader"><user-print creatorid="{{ posts[postid].creator_id }}" prepend="Posted by" size="small"></user-print> <span hidden?="{{ showchannel }}">In channel {{ posts[postid].channel_id }}</span> <time-ago prepend="Last update " isostring="{{ posts[postid].creation_date }}"></time-ago></div>
<div class="tile media-view" style="background: url({{ posts[postid].banner }}) no-repeat; background-size: cover;" title="{{ posts[postid] | descText }}">
<div class="heroBottom">
<div class="type">{{ posts[postid].displaytype }}</div>
<div class="headline">{{ posts[postid].url_title }}</div>
<div class="postDesc">{{ posts[postid].body | stripTags | shorten }}</div>
<div class="attribution"> {{ posts[postid].url }} </div>
</div>
</div>
</template>
<template if="{{ posts[postid].displaytype == 'video' }}">
... (etc)
</template>
</template>
<script>
Polymer('post-list', {
postids: [],
posts: {},
created: function(){
},
ready: function(){
},
updatePostList: function(e){
this.postids = e.detail.response.post_ids;
},
updatePostDetail: function(e){
json = e.detail.response.post;
postid = json.id;
this.posts[postid] = json;
this.posts[postid].displaytype = 'barePost'; // default value so I don't have to worry about a bunch of similar 'else' statements
this.posts[postid].hasVideo = 'noVideo'; // ditto
if(json.hasOwnProperty('url_meta_tags')){
if(json.url_meta_tags.hasOwnProperty('og:video') || json.url_meta_tags.hasOwnProperty('twitter:player:stream')){
this.posts[postid].hasVideo = 'video';
this.posts[postid].displaytype = 'video';
}
else if(json.url_meta_tags.hasOwnProperty('og:image') || json.url_meta_tags.hasOwnProperty('image') || json.hasOwnProperty('banner')){
if(json.body.length > 350){
this.posts[postid].displaytype = 'longArticle';
}
else if(json.body.length > 0){
this.posts[postid].displaytype = 'articleImage';
}
else{
this.posts[postid].displaytype = 'bareImage';
}
}
}
else if(json.hasOwnProperty('files')){
this.posts[postid].displaytype = 'embeddedMedia';
}
}
</script>
From the documentation: https://www.polymer-project.org/docs/polymer/binding-types.html#importing-templates-by-reference
You could use the ref attribute combined with bind to make this less of a mess.
<!-- Create Your displayType templates -->
<template id="longArticle">
<!-- template for displayType === longArticle -->
</template>
<template id="bareImage">
<!-- template for displayType === bareImage -->
</template>
<!-- then construct your loop -->
<template for={{postid in postids}}>
<template bind ref="{{posts[postid].displaytype}}"></template>
</template>