Ограничения на условные шаблоны полимеров?

Хорошо, кажется, это работает. Это грязно? Определенно да. По сути, из моего API я получаю множество post_id, которые мне нужно форматировать по-разному в зависимости от того, что я нахожу. Попытка использовать что-то вроде JSON.hasOwnProperty не сработала (не знаю почему), поэтому я прибегаю к назначению переменной на основе отдельной функции обнаружения.

Есть лучший способ сделать это? В этом я уверен. Если у вас есть лучший подход, пожалуйста, дайте мне знать. Но вот к чему я пришел:

<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>

Из документации: https://www.polymer-project.org/docs/polymer/binding-types.html#importing-templates-by-reference

Вы можете использовать атрибут ref в сочетании с bind, чтобы не запутаться.

 <!-- 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>