javascript - 暴露 polymer 中的 API

标签 javascript polymer

我正在尝试学习 polymer ,并且正在尝试制作一个基本的消息传递框架。所以我创建了一个名为 messages-framework 的小 polymer 元素,它将显示消息,并在 3 秒后删除该消息。如何公开向该元素添加消息的方法? 这是我的 polymer 元件

<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">   

<polymer-element name="messages-framework">                                     
  <template>                                                                    
    <ul>                                                                        
      <template repeat="{{ m in messages }}">                                   
       <li>{{ m }}</li>                                                         
      </template>                                                               
    </ul>                                                                       
    <paper-input-decorator label="message" floatinglabel>                       
      <input is="core-input" value="{{ message }}" type="text">                 
    </paper-input-decorator>                                                    
    <paper-button raised on-tap="{{ addMessage }}">Add Message</paper-button>   
  </template>                                                                   
  <script>                                                                      
    Polymer({                                                                   
      messages: [],                                                             
      addMessage: function () {                                                 
        this.messages = this.messages.concat(this.message);                     
        setTimeout(this.removeMsg.bind(this, this.message), 3000);              
        this.message = "";                                                      
      },                                                                        
      removeMsg: function (msg) {                                               
        this.messages = this.messages.filter(function (m) {                     
          return msg !== m;                                                     
        });                                                                     
      }                                                                         
    });                                                                         
  </script>                                                                     
</polymer-element>

如有任何帮助,我们将不胜感激!

我认为我的问题表述得不好。如果有两个 polymer 元素,例如 messages-framework 和 newuser-form,如果 newuser-form 需要添加到 messages-framework,该 polymer 元素将如何使用 messages-framework API?

最佳答案

在 Polymer 中公开 API 就像在日常元素中所做的那样。

  1. 获取对元素的引用。例如 var p = document.getElemnetTagName('p');
  2. 使用它的方法。例如 p.innerHTML = "Hello World"p.setAttribute(attribute,value)

示例:
您的自定义元素

<polymer-element name="messages-framework">                                     
  <template>                                                                    
    //all your core markup
  </template>                                                                   
  <script>                                                                      
    Polymer({                                                                   
      messages: [],                                                             
      addMessage: function () {                                                 
        this.messages = this.messages.concat(this.message);                     
        setTimeout(this.removeMsg.bind(this, this.message), 3000);              
        this.message = "";                                                      
      },                                                                        
      removeMsg: function (msg) {                                               
        this.messages = this.messages.filter(function (m) {                     
          return msg !== m;                                                     
        });                                                                     
      }                                                                         
    });                                                                         
  </script>                                                                     
</polymer-element>

使用它的API

<body>
  //Initialing the Element by loading it on to the page
  <messages-framework></messages-framework>

<script>
var messagesFramework = document.getElementsByTagName('messages-framework');

//this will call the addMessage() method of the element
messagesFramework.addMessage();
</script>
</body>

关于javascript - 暴露 polymer 中的 API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28824572/

相关文章:

javascript - Polymer 和外部 Node.js 库

javascript - Polymer 2.0 数据绑定(bind)阵列

javascript - 自定义元素中的脚本标签

javascript - Leaflet + Polymer 2 map 加载扭曲的瓷砖但适用于非 polymer 代码

custom-controls - 如何访问自定义元素的主机

javascript - Google Apps 脚本中的循环和输出

javascript - goodreads API 给出了 Cross-Origin Request Blocked : error in javascript

javascript - 如何将此 javascript 转换为 JSON

javascript - JQuery/Javascript 淡入滚动不工作

javascript - 您如何强制 Linux 上的 Chrome 重新计算/重新呈现 ":hover"样式?