对话聊天无法提交

Question

我在进行提交聊天时遇到问题，提示“未定义车把”。我在此链接中遵循教程代码：https://codepen.io/drehimself/pen/KdXwxR

这是错误：

这是我的html代码：

            <div class="chat-area scrollbar-macosx scroll-wrapper">
                <div class="chat-area-content scrollbar-macosx">
                    <ul class="container">
                        <!-- Label Time Chat -->
                        <div class="text-center mt-3">
                            <span class="label-time">30 Apr</span>
                        </div>
                        <!-- Merchant chat -->
                        <div class="d-flex justify-content-start mt-3">
                            <div class="chat-content-image">
                                <div class="upload-image">
                                    <div class="time-image">
                                        <span class="time-item">14:10</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Customer chat -->
                        <div class="d-flex justify-content-start mt-3">
                            <div class="chat-context">
                                <div class="chat-text">
                                    <p></p>
                                </div>
                                <div class="chat-time">
                                    <p>14:15</p>
                                </div>
                            </div>
                        </div>
                        <!-- Customer Chat -->
                        <div class="d-flex justify-content-end mt-3 mb-4">
                            <div class="chat-context">
                                <div class="chat-text">
                                    <p></p>
                                </div>
                                <div class="chat-time">
                                    <p>15:00</p>
                                </div>
                            </div>
                        </div>
                    </ul>
                </div>
                <form class="keyboard-chat">
                    <div class="chat-input">
                        <div class="attach-button mr-3 mb-3">
                            <button type="button" class="circle-button">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                        <div class="chat-input-textarea" style="padding-left: 0px;">
                            <div>
                                <textarea id="message-to-send" name="message-to-send" placeholder="Type here..." rows="3" class="keyboards f-size-12" style="max-height: 130px;"></textarea>
                            </div>
                        </div>
                        <div class="btn-submit-message mb-3"></div>
                    </div>
                </form>
            </div>

<script id="message-template" type="text/x-handlebars-template">
    <div class="d-flex justify-content-end mt-3">
        <div class="chat-context">
            <div class="chat-text">
                <p>{{messageOutput}}</p>
            </div>
            <div class="chat-time">
                <p>{{time}}</p>
            </div>
        </div>
    </div>
</script>

这是我的js：

(function(){

    var chat = {
      messageToSend: '',
      messageResponses: [
        'Why did the web developer leave the restaurant? Because of the table layout.',
        'How do you comfort a JavaScript bug? You console it.',
        'An SQL query enters a bar, approaches two tables and asks: "May I join you?"',
        'What is the most used language in programming? Profanity.',
        'What is the object-oriented way to become wealthy? Inheritance.',
        'An SEO expert walks into a bar, bars, pub, tavern, public house, Irish pub, drinks, beer, alcohol'
      ],
      init: function() {
        this.cacheDOM();
        this.bindEvents();
        this.render();
      },
      cacheDOM: function() {
        this.$chatHistory = $('.chat-area-content');
        this.$button = $('.btn-submit-message');
        this.$textarea = $('#message-to-send');
        this.$chatHistoryList =  this.$chatHistory.find('ul');
      },
      bindEvents: function() {
        this.$button.on('click', this.addMessage.bind(this));
        this.$textarea.on('keyup', this.addMessageEnter.bind(this));
      },
      render: function() {
        this.scrollToBottom();
        if (this.messageToSend.trim() !== '') {
          var template = Handlebars.compile( $("#message-template").html());
          var context = { 
            messageOutput: this.messageToSend,
            time: this.getCurrentTime()
          };

          this.$chatHistoryList.append(template(context));
          this.scrollToBottom();
          this.$textarea.val('');

          // responses
          var templateResponse = Handlebars.compile( $("#message-response-template").html());
          var contextResponse = { 
            response: this.getRandomItem(this.messageResponses),
            time: this.getCurrentTime()
          };

          setTimeout(function() {
            this.$chatHistoryList.append(templateResponse(contextResponse));
            this.scrollToBottom();
          }.bind(this), 1500);

        }

      },

      addMessage: function() {
        this.messageToSend = this.$textarea.val()
        this.render();         
      },
      addMessageEnter: function(event) {
          // enter was pressed
          if (event.keyCode === 13) {
            this.addMessage();
          }
      },
      scrollToBottom: function() {
         this.$chatHistory.scrollTop(this.$chatHistory[0].scrollHeight);
      },
      getCurrentTime: function() {
        return new Date().toLocaleTimeString().
                replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3");
      },
      getRandomItem: function(arr) {
        return arr[Math.floor(Math.random()*arr.length)];
      }

    };

    chat.init();

  })();

.js的代码与本教程中的代码相同，但是我只更改了我使用的名称类。

我的期望是，当我输入/单击发送按钮时，对话将提交到聊天区域。

Answer 1

由于您调用Handlebars，因此此代码需要Handlebars JS。您可以通过在网站上添加installation steps来安装它。