Question

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

<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>会产生{＆＃34; title＆＃34;：＆＃34; Lord Meowser＆＃34;，＆＃34; description＆＃34;：＆＃34; lala＆＃34;}

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

我该如何映射？如果用户插入其他内容，我应该如何处理，让我们说活动=＆＃34; notanobject＆＃34;。目前，已覆盖定义的内部对象，并显示字符串。

Answer 1

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

这应该有用。

Polymer 1.0元素属性对象绑定，维护结构

1 个答案: