Polymer 聚合物条件模板的限制?

Polymer 聚合物条件模板的限制?,polymer,Polymer,我正在基于JSON对象中可用的数据开发一组条件视图——有效地说,如果有媒体要显示,则显示媒体视图;如果只有文本信息要显示,则显示文档视图,等等。到目前为止,我一直使用的方法使用hasOwnProperty()检查JSON对象以确定可用数据,并根据其中的内容计算视图模板 我已经实现了一些赤裸裸的版本,但现在我什么也得不到。if似乎只是终止了嵌套模板。以下是我正在尝试的: <template bind if="{{ posts[postid].hasOwnProperty('v

我正在基于JSON对象中可用的数据开发一组条件视图——有效地说,如果有媒体要显示,则显示媒体视图;如果只有文本信息要显示,则显示文档视图,等等。到目前为止,我一直使用的方法使用hasOwnProperty()检查JSON对象以确定可用数据,并根据其中的内容计算视图模板

我已经实现了一些赤裸裸的版本,但现在我什么也得不到。if似乎只是终止了嵌套模板。以下是我正在尝试的:

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

由@{posts[postid].creator_id}发布
{{posts[postid].url\u title}
{{posts[postid].url\u description}
{{posts[postid].url}
由@{posts[postid].creator_id}发布
{{posts[postid].body}
{{posts[postid].url}
两个问题: 1.这个if语句可以在这个上下文中工作吗,还是需要重新构建为一个过滤器?
2.对于给定的渲染,如果两个if都为true,会发生什么情况?

好的,这似乎起作用了。它凌乱吗?是的,当然。 实际上,从我的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>

在通道{posts[postid].channel_id}
{{posts[postid].displaytype}
{{posts[postid].url\u title}
{posts[postid].body | stripTags | shorten}
{{posts[postid].url}
... (等)
聚合物(“后列表”{
职位:[],
职位:{},
已创建:函数(){
},
就绪:函数(){
},
updatePostList:函数(e){
this.postids=e.detail.response.post_id;
},
updatePostDetail:函数(e){
json=e.detail.response.post;
postid=json.id;
this.posts[postid]=json;
this.posts[postid].displaytype='barePost';//默认值,因此我不必担心一堆类似的'else'语句
this.posts[postid].hasVideo='noVideo';//同上
if(json.hasOwnProperty('url\u meta\u 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')){
如果(json.body.length>350){
this.posts[postid].displaytype='longArticle';
}
else if(json.body.length>0){
this.posts[postid].displaytype='articleImage';
}
否则{
this.posts[postid].displaytype='bareImage';
}
}
}
else if(json.hasOwnProperty('files')){
this.posts[posted].displaytype='embeddedMedia';
}
}
来自文档:

您可以将
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>


我还不确定我是否得到了答案,但我的路径是设置一个附加到JSON对象的变量,该变量确定显示类型,然后根据该变量创建条件视图模板,而不是直接询问JSON对象。到目前为止,这似乎可行。如果我成功,我将发布代码示例。这是是正确的和推荐的。