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

Question

我正在做聊天应用程序，目前我设法在Ember2.14项目中添加了bootstrap / bootsnipp代码（HTML，css，jquery），并且当我将其添加到此文件夹public / assets / Chat.js中时，jQuery工作正常，然后添加了引用到app / index.html.html中，现在已加载到vendor.js中，当我加载页面时，jQuery运行正常...

-我的问题是：如何再次从Ember调用jquery函数以及将代码放置在哪里。当我按Send按钮将输入消息放入具有jquery效果的Chat窗口中时，例如下面的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)); 

---

完整的BootstarpCode： https ：//bootsnipp.com/snippets/ZlkBn

---

更新请举例说明您的答案，因为我仍然是炭烬中的新人。

这是我的代码：

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路/chat.js

import Ember from 'ember';

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

3-模型/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级别复制此功能。 您仍然可以使用引导程序样式，但是将在Ember.js中实现该功能，而不必使用jQuery。

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