聚合物1.0元素属性对象绑定，保持结构 [英] Polymer 1.0 element property object binding, maintain structure

问题描述

我想创建一个将JSON对象作为输入的自定义元素.

I want to create a custom element that takes a JSON object as input.

<activity-tracker activity='{"title": "Lord Meowser", "description": "lala"}'></activity-tracker>

元素本身看起来像这样

<dom-module id="activity-tracker">
   <style>
     :host {
       display: block;
       box-sizing: border-box;
     }
   </style>

   <template>
     <p>{{activity}}</p>
     <p>{{activity.title}}</p>
   </template>

 </dom-module>

与属性绑定

properties: {
  activity: {
     title: {
        type:String,
        value: '...'
     },
     description:{
        type:String,
        value: '...'
     }
   }
},

<p>{{activity}}</p>的结果为{"title":"Lord Meowser"，"description":"lala"}

<p>{{activity}}</p> results in {"title": "Lord Meowser", "description": "lala"}

<p>{{activity.title}}</p>为空

我该如何映射?如果用户插入其他内容，我应该如何处理，比如说activity ="notanobject".当前，已定义的内部对象仅被覆盖，并显示字符串.

How can I map it? And how should I handle if user inserts something else, lets say activity="notanobject". Currently, defined internal object is just overwritten and the string is shown.

推荐答案

    <dom-module id="activity-tracker">
    <style>
     :host {
       display: block;
       box-sizing: border-box;
     }
    </style>

   <template>
     <p>{{variable}}</p><!-- this shows [object Object]-->
     <p>{{variable.title}}</p> <!-- this shows Lord Meowser-->
     <p>{{variable.description}}</p> <!-- this shows lalala-->
   </template>

    <script>
      Polymer({
        is:"activity-tracker",
        properties:{
          variable:{
            type:Object,
            value: function(){return {};}
          }
        }

      });
    </script>  

</dom-module> 

<activity-tracker variable='{"title": "Lord Meowser", "description": "lala"}'></activity-tracker>

这应该有效.

这篇关于聚合物1.0元素属性对象绑定，保持结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！