定製聚合物元素和javascript dom操作的多個實例

Question

我創建了一個定製聚合物組件，它是一個聊天組件。發佈消息時，會發布假的答案。沒什麼很複雜的。

此外，當我實例化我的組件的兩個實例時，當我單擊輸入按鈕發佈消息時，用於獲取文本的文本字段的實例不是好的。

我不知道這是我的代碼問題還是我編碼組件或聚合物規則行爲的方式。

請讓我知道發生了什麼問題。

最佳regads，

這裏的代碼：

<link rel="import" href="../../../bower_components/polymer/polymer.html"> 
<!-- css import --> <!-- ... --> 

<polymer-element name="chat-element"> 
<template> 
    <div class="chatview containerwindow" > 
     <div class="containertitle"> 
      <span>CHAT VIEW</span> 
     </div> 
     <div class="chatcomponent"> 
      <div id="messagecontainer" class="messagecontainer" > 

      </div> 
      <div class="footer"> 
       <input type="text" class="inputtext" id="inputtextfield" /> 
       <div class="insertchatbutton" id="insertchatbutton" >Enter</div> 
      </div> 
     </div> 
    </div> 
</template> 
<script> 

    Polymer('chat-element', { 
     myself: "", 
     inputextfiled: "", 
     insertchatbutton: "", 
     messagecontainer: "", 

     domReady: function() { 
      myself = this; 

      inputextfiled = this.$.inputtextfield; 
      inputextfiled.onkeyup = function(event) { 
       if (event.which == 13) { 
        myself.insertMessage(this); 
       } 
      }; 
      insertchatbutton = this.$.insertchatbutton; 
      insertchatbutton.onclick = function() { 
       myself.insertMessage(inputextfiled); 
      }; 

      messagecontainer = this.$.messagecontainer; 

     }, 

     insertMessage : function (textview) { 
        var div = document.createElement('div'); 
       div.classList.add('chatpushed'); 
       var span = document.createElement('span'); 
       span.innerHTML = textview.value; 
       div.appendChild(span); 

       messagecontainer.appendChild(div); 

       //scroll to the bottom 
       messagecontainer.scrollTop = messagecontainer.scrollHeight; 

       textview.value = ""; 

       setTimeout(self.reply, 1000); 
      }, 

    reply : function() { 
     var div = document.createElement('div'); 
     div.classList.add('chatreceived'); 
     var span = document.createElement('span'); 
     span.innerHTML = "Message received"; 
     div.appendChild(span); 

     messagecontainer.appendChild(div); 
    } 
    }); 
</script> 

Answer 1

首先，這裏是一個使用多種聚合物成語工作版本：

http://jsbin.com/xokar/9/edit

現在，關於你遇到的一些問題。當你寫

inputextfiled = this.$.inputtextfield

，因爲你沒有使用var您創建一個全局變量。這意味着整個應用程序只有一個值inputextfiled（原文如此）。

您必須使用this關鍵字來創建和訪問實例變量，例如this.inputextfield。

您在這裏有一個相關的問題：setTimeout(self.reply, 1000);，因爲你指示暫停時以window調用self.reply功能this。你真的想要像setTimeout(self.reply.bind(self))這樣的東西。

以下是關於this的一些一般信息：http://www.quirksmode.org/js/this.html。