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

我正在做聊天应用程序，目前我设法在我的Ember2.14项目中添加bootstrap/bootsnipp代码（Html、css、jquery），当我将jquery添加到这个文件夹public/assets/Chat.js中时，它工作正常，然后我在app/index.Html中添加对它的引用。现在它加载到vendor.js中，当我加载页面时，jquery工作正常

-我的问题是：如何（再次）从Ember调用jquery函数，以及将代码放在何处。。当我按下Send按钮时，我想在聊天窗口中输入带有jquery效果的消息，如下面链接中的引导示例

我对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)); 

---

完整引导StarpCode：

---

更新请举例说明您的答案，因为我在余烬还是新手

这是我的代码：

1-模板/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>

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

---

实际上，在本例中，jQuery代码管理所有内容，您不需要使用其他javascript框架就可以获得功能。如果您想使用Ember.js，这是在Ember.js级别复制此功能的最佳方法。您仍然可以使用引导样式，但是功能将在Ember.js中实现，您不必使用jQuery

---

例如，这里有一个在Ember中的聊天实现：

实际上，在本例中，jQuery代码管理所有内容，您不需要使用其他javascript框架就可以获得该功能。如果您想使用Ember.js，这是在Ember.js级别复制此功能的最佳方法。您仍然可以使用引导样式，但是功能将在Ember.js中实现，您不必使用jQuery

---

例如，这里有一个在Ember中的聊天实现：

感谢您的快速响应和共享您的代码，我将尝试运行它…我只是想知道为什么我不能在操作中调用某些jquery函数，为什么我需要在Ember中复制jquery代码..您能告诉我如何从Ember调用jquery吗。我尝试了DiInsertElement，但我失败了我是jquery新手，我不知道我需要从jquery代码中调用哪个方法，以及如何从Ember调用它。同意Zoltan的观点。除非您确实需要jQuery来实现某些功能，否则最好假设您不同时需要jQuery和Ember。您应该能够在没有jQuery的情况下使用Ember完成您想要的任务。二者结合是可能的,，但是，正如您第一次学习Ember时所做的那样，这并不容易。感谢您的快速响应和共享您的代码，我将尝试运行它…我只是想知道为什么我不能在操作中调用某些jquery函数，为什么我需要在Ember中复制jquery代码。您能告诉我如何从Ember调用jquery吗。我尝试了diInsertElement，但我是新手我不知道我需要从jquery代码中调用哪个方法，以及如何从Ember中调用它。同意Zoltan。除非您确实需要jQuery来实现某些功能，否则最好假设您不同时需要jQuery和Ember。您应该能够在没有jQuery的情况下使用Ember完成您想要的任务。将两者结合起来是可能的，但在您第一次学习Ember时并不容易。

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