如何傳遞所需的屬性元素構造

我有這樣如何傳遞所需的屬性元素構造

<script src="http://www.polymer-project.org/platform.js"></script> 
<script src="http://www.polymer-project.org/polymer.js"></script> 

<polymer-element name="my-foo" constructor="MyFoo" attributes="controller" noscript> 
    <template> 
     hello from {{options.name}} 
    </template> 
    <script> 
     Polymer({ 
     get options() { 
      return this.controller.options; 
     } 
     }); 
    </script> 
</polymer> 

<div id="container"></div> 

<script> 
    document.addEventListener('polymer-ready',function() { 
    var foo = new MyFoo(); 
    foo.controller = { 
     options : { 
      name : "here" 
     } 
    }; 
    document.body.appendChild(foo); 
    }); 
</script>

屬性「控制器」的聚合物定製元素預計爲具有類型對象的屬性的「選項」一個對象。

我可以用

var foo = new Foo();

，但我無法設置屬性「控制」，這會導致錯誤創建自定義元素的一個實例：

Uncaught TypeError: Cannot read property 'options' of undefined.

當然 - 我可以修改在聚合物組件中的選項吸氣劑是這樣的故障安全：

... 
get options() { 
    return this.controller ? this.controller.options : null; 
} 
...

但是，在這種情況下，自定義元素也不能識別應用的數據。

最後的問題：如何將所需的屬性傳遞給自定義元素構造函數？

來源

2014-10-01 lgersman

'foo.controller = options;'？ – Sprottenwels 2014-10-01 12:31:24

TypeError被元素構造函數吐出...換句話說，你的想法是有點，mpfffhh，naja ... – lgersman 2014-10-01 12:37:34

然後tu mir mir gefallen並設置一個小提琴重現問題。 – Sprottenwels 2014-10-01 13:09:13

一種解決方案是使用一個計算的屬性：

<script src="http://www.polymer-project.org/components/platform/platform.js"></script> 
 
<link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'> 
 

 
<polymer-element name="my-foo" constructor="MyFoo" attributes="controller" noscript> 
 
    <template> 
 
     hello from {{options.name}} 
 
    </template> 
 
    <script> 
 
     Polymer({ 
 
     computed: { 
 
      options: 'controller.options' 
 
     } 
 
     }); 
 
    </script> 
 
</polymer-element> 
 

 
<script> 
 
    document.addEventListener('polymer-ready',function() { 
 
    var foo = new MyFoo(); 
 
    document.body.appendChild(foo); 
 
    foo.controller = { 
 
     options : { 
 
     name : "here" 
 
     } 
 
    } 
 
    }); 
 
</script>

你甚至可以使計算性能只是一個方法的調用。關鍵是通過這樣做，Polymer可以知道何時檢查options是否發生了變化，因爲它知道計算options所需的輸入。

Polymer({ 
    computed: { 
    options: 'getOptions(controller)' 
    }, 
    getOptions: function(controller) { 
    return controller ? controller.options : null; 
    } 
});

來源

2014-10-01 15:24:45

的確是一個非常有用的解決方法 - 謝謝！ – lgersman 2014-10-02 10:42:10

如何傳遞所需的屬性元素構造

回答

相關問題