Question

我创建了一个自定义聚合物组件，它是一个聊天组件。发布消息时，会发布虚假答案。没什么比这更复杂的了。

此外，当我实例化我的组件的两个实例时，当我单击enter按钮发布消息时，用于获取文本的文本字段的实例不是好的。

我不知道这是我的代码问题，也不知道我使用聚合物编写组件或常规行为的方式。

请让我知道出了什么问题。

最好的注册，

这里是代码：

<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

首先，这是使用更多Polymer惯用语的工作版本：

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

现在，关于你遇到的一些问题。当你写

inputextfiled = this.$.inputtextfield

因为你没有使用var而创建了一个全局变量。这意味着整个应用程序只有inputextfiled（sic）的一个值。

您必须使用this关键字来创建和访问实例变量，例如this.inputextfield。

您在此处遇到相关问题：setTimeout(self.reply, 1000);，因为您已指示超时以self.reply调用window函数this。你真的想要setTimeout(self.reply.bind(self))。

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

自定义聚合物元素和javascript dom操作的多个实例

1 个答案: