Comment appeler la fonction Bootstrap jquery à partir de Ember 2 sur l'action spécifique

Question

Je fais l'application Chat, Actuellement, j'ai réussi à ajouter le code bootstrap/bootsnipp (Html, css, jquery) dans mon projet Ember2.14 et jquery fonctionne bien quand j'ajoute il dans ce dossier public/assets/Chat.js puis j'ajoute référence dans l'app/index.html.it est maintenant chargé dans vendor.js et jquery fonctionne bien quand je charge la page ...

-Ma question est: Comment puis-je appeler la fonction jquery (encore) à partir de Ember et où mettre le code .. Je veux quand j'appuie sur le bouton Envoyer pour mettre mon entrée Message dans la fenêtre de discussion avec effet jquery comme l'exemple Bootstrap dans le ci-dessous lien ..

Je suis totalement nouveau à jquery & Ember donc je ne suis pas sûr de fonctionner à partir du code ci-dessous jquery Je dois appeler (je pense qu'il peut être sendMessage) et comment l'appeler de 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 complète: https://bootsnipp.com/snippets/ZlkBn

---

Mise à jour S'il vous plaît expliquer votre réponse avec e xample comme je suis encore nouveau en braise.

voici mon 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-voies/chat.js

import Ember from 'ember'; 

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

3 modèles/discussion. js

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

4 contrôleurs/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

En fait, dans ce cas, le code jQuery gère tout et vous avez la fonctionnalité sans utiliser d'autres framework javascript. Si vous souhaitez utiliser Ember.js, le meilleur moyen de répliquer cette fonctionnalité au niveau de Ember.js. Vous pouvez toujours utiliser le style bootstrap mais la fonctionnalité sera implémentée dans Ember.js et vous n'aurez pas besoin d'utiliser jQuery.

Par exemple ici est une implémentation de chat dans Ember: https://github.com/zoltan-nz/chat-app