javascript - 如何在特定操作上从 Ember 2 调用 Bootstrap jquery 函数

Question

我正在做聊天应用程序，目前我设法在我的 Ember2.14 项目中添加 bootstrap/bootsnipp 代码(Html，css，jquery)，当我将其添加到此文件夹 public/assets/Chat.js 中时，jquery 工作正常我在 app/index.html 中添加了对它的引用。它现在已加载到 vendor .js 中，并且当我加载页面时 jquery 工作正常...

-我的问题是:如何从 Ember 调用 jquery 函数(再次)以及在哪里放置代码。我希望当我按下“发送”按钮时将我的输入消息放入带有 jquery 效果的聊天窗口中，就像 Bootstrap 示例一样在下面的链接中..

我对jquery和Ember完全陌生，所以我不确定我需要调用下面的jquery代码中的哪个函数(我认为它可能是sendMessage)以及如何从Ember调用它..

jquery:

(function () {
    var Message;
    Message = function (arg) {
        this.text = arg.text, this.message_side = arg.message_side;
        this.draw = function (_this) {
            return function () {
                var $message;
                $message = $($('.message_template').clone().html());
                $message.addClass(_this.message_side).find('.text').html(_this.text);
                $('.messages').append($message);
                return setTimeout(function () {
                    return $message.addClass('appeared');
                }, 0);
            };
        }(this);
        return this;
    };
    $(function () {
        var getMessageText, message_side, sendMessage;
        message_side = 'right';
        getMessageText = function () {
            var $message_input;
            $message_input = $('.message_input');
            return $message_input.val();
        };
        sendMessage = function (text) {
            var $messages, message;
            if (text.trim() === '') {
                return;
            }
            $('.message_input').val('');
            $messages = $('.messages');
            message_side = message_side === 'left' ? 'right' : 'left';
            message = new Message({
                text: text,
                message_side: message_side
            });
            message.draw();
            return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);
        };
        $('.send_message').click(function (e) {
            return sendMessage(getMessageText());
        });
        $('.message_input').keyup(function (e) {
            if (e.which === 13) {
                return sendMessage(getMessageText());
            }
        });
        sendMessage('Hello Philip! :)');
        setTimeout(function () {
            return sendMessage('Hi Sandy! How are you?');
        }, 1000);
        return setTimeout(function () {
            return sendMessage('I\'m fine, thank you!');
        }, 2000);
    });
}.call(this)); 

<小时/>

完整的启动代码: https://bootsnipp.com/snippets/ZlkBn

<小时/>

更新请用示例解释您的答案，因为我还是 ember 新手。

这是我的代码:

1-templates/application.hbs:

<div class="chat_window">
    <div class="top_menu">
    <div class="buttons">
    <div class="button close"></div>
    <div class="button minimize"></div>
    <div class="button maximize"></div>
    </div>
    <div class="title">Chat</div>
    </div>
    <ul class="messages">
      {{#if responseMessage}}
        {{#each model as |chat|}}
          <div>{{chat.message}}</div>
        {{/each}}
      {{/if}}

    </ul>
    <div class="bottom_wrapper clearfix">
        <div class="message_input_wrapper">
            {{input class="message_input" value=messageInput placeholder="Type your message here..." }}
        </div>
        <button class="send_message"  disabled={{isDisabled}} {{action 'saveMessage'}} >
          <div class="icon"></div>
          <div class="text">Send</div>
        </button>

      </div>
    </div>

2-routes/chat.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
return this.store.findAll('chat');
}
});

3-models/chat.js

import DS from 'ember-data';
export default DS.Model.extend({
  message: DS.attr('string')
});

4-controllers/chat.js

import Ember from 'ember';
export default Ember.Controller.extend({
 responseMessage: '',
  messageInput: '' ,

  isDisabled: Ember.computed.empty('messageInput'),

  actions: {
    saveMessage() {
      var _that = this;
      var inputMessage = this.get('messageInput');
      var newInputMessage = this.store.createRecord('chat',{
        message: inputMessage
         });

      //Call super script BackEnd
        var url ='http://localhost:5000/superscript?message='+this.get('messageInput');
       console.log('Request URL is :',url);
        Ember.$.getJSON(url).then(function(data) {
         _that.set('responseMessage', data.message);
        _that.set('messageInput', '');
        console.log('resonse is :',data.message);
        var newResponseMessage = _that.store.createRecord('chat',{
          message: data.message
           });

         });
    }//save
  }//actions
});//export

Answer 1

实际上，在这种情况下，jQuery 代码管理所有内容，并且您无需使用其他 javascript 框架即可获得该功能。如果您想使用 Ember.js，在 Ember.js 级别复制此功能的最佳方法。您仍然可以使用 bootstrap 样式，但功能将在 Ember.js 中实现，并且您不必使用 jQuery。

例如，这里是 Ember 中的聊天实现:https://github.com/zoltan-nz/chat-app