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

Question

I am doing Chat application ,Currently I managed to add bootstrap/bootsnipp code(Html,css,jquery) in my Ember2.14 project and jquery works fine when I add it in this folder public/assets/Chat.js then I add reference to it in app/index.html.it is now loaded in vendor.js and jquery is working fine when I am loading the page...

-My Question is: How can I call the jquery function (again) from Ember and where to put the code.. I want when I press Send button to put my input Message in Chat window with jquery effect like the Bootstrap example in the below link ..

I am totally new to jquery & Ember so I am not sure which function from the below jquery code I need to call (I think it may be sendMessage) and how to call it from 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)); 

---

Full BootstarpCode: https://bootsnipp.com/snippets/ZlkBn

---

Update Please explain your answer with example as I am still new in ember.

here is my code :

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

Actually in this case the jQuery code manages everything and you got the functionality without using other javascript framework. If you would like to use Ember.js, the best way to replicate this functionality in Ember.js level. You can still use the bootstrap style but the functionality will be implemented in Ember.js and you don't have to use jQuery.

For example here is a chat implementation in Ember: https://github.com/zoltan-nz/chat-app