是否有可能在Polymer中跨Web組件（和導入）共享混合？

Question

作爲對How to extend multiple elements with Polymer和Polymer multiple inheritence/composition的跟進，根據他們的回答，我想知道是否可以在多個Web組件（和多個導入）中共享混合以重用功能。

Mixins似乎是跨多個自定義元素共享功能的唯一方法。但是，似乎只能在一次導入中使用混入。也就是說，如果你有一個mixin，它爲web組件提供了一個特定的功能（比如draggable），如果它不在同一個導入中，就不可能將它混合到你的Polymer元素的構造中。

也許我在那兒弄錯了一些問題，但如果不是這樣，感覺使用mixins也不是很靈活，因爲我仍然無法跨Web組件共享功能。

UPDATE：

正如Scott萬里在他的評論中指出，這是可能在多個導入使用混入。我只是不知道該怎麼做，事實證明，這是非常簡單的。

假設我們有一個應該在多個組件之間共享的mixin，但組件分佈在很多導入中。所有人必須做的是在window對象上定義該mixin自己的導入。因此，例如：

shared.html

<script> 
    window.sharedMixin = { 
    // shared functionality goes here 
    }; 
</script> 

，然後重複使用混入在另一個導入另一個組成部分，是作爲進口shared.html一樣簡單。

我-component.html

<link rel="import" href="path/to/shared.html"> 

從這一點上來說，sharedMixin可作爲進口中全局對象：

Polymer('my-component', Platform.mixin({ 
    // my-component logic 
}, sharedMixin); 

我希望幫助別人。我會寫一篇博客文章，並將其鏈接到這裏。

更新2

我在這裏寫了一個博客帖子：http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/

Answer 1

使用全局狀的部分是推薦的路要走。
使<name-you-like>並使用get/set來更改它（也可以使用屬性，雖然它們只是 sad 字符串）。

從Polymer API guide你會看到工作（好看）的例子是這樣的：

<polymer-element name="app-globals"> 
    <script> 
    (function() { 
    // these variables are shared by all instances of app-globals 
    var firstName = 'John'; 
    var lastName = 'Smith'; 

    Polymer({ 
     ready: function() { 
     // copy global values into instance properties 
     this.firstName = firstName; 
     this.lastName = lastName; 
     } 
    }); 
    })(); 
    </script> 
</polymer-element> 

而且使用javascript ES5的getter和他們一起玩/ setter方法，如在上述情況下會是什麼樣子

<polymer-element name="app-globals"> 
    <script> 
    (function() { 
    // these variables are shared by all instances of app-globals 
    var firstName = 'Arnold'; 
    var lastName = 'Schwarzenegger'; 

    Polymer({ 
     ready: function() { 
     // copy global values into instance properties 
     this.firstName = firstName; 
     this.lastName = lastName; 
     }, 
     get fullTerminatorName() { 
     return this.firstName + ' ' + this.lastName; 
     } 
    }); 
    })(); 
    </script> 
</polymer-element> 

I'll be back.

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.