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

Question

我正在做聊天应用程序，目前我设法在我的 Ember2.14 项目中添加了引导/bootsnipp 代码(Html，css，jquery(，当我将它添加到这个文件夹中时，jquery 工作正常 public/assets/聊天.js然后我在 app/index.html.it 中添加对它的引用现在加载在供应商中.js并且 jquery 在我加载页面时工作正常......

-我的问题是：如何从 Ember 调用 jquery 函数(再次(以及将代码放在哪里。我希望当我按发送按钮将我的输入消息放入具有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)); 

---

完整的引导代码： https://bootsnipp.com/snippets/ZlkBn

---

更新请用例子解释你的答案，因为我还是新手。

这是我的代码：

1-模板/应用程序.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路线/聊天.js

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

3模特/聊天.js

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

4 控制器/聊天.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