Durundal Google Translate

Question

How can I bind Google translate in Durundal Shell.js , shell.html?

html

<div id="google_translate_element"></div>

script

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

  function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en', autoDisplay: false }, 'google_translate_element');
        }

Answer 1

See Durandal's Composition functionality: http://durandaljs.com/documentation/Using-Composition/

Example:

<div>
    <div data-bind="compose:'views/google_translate.html'"></div>
</div>

Answer 2

Durandal doesn't render script tags within views. To render them, you should use knockout custom bindings:

ko.bindingHandlers.googleTranslate = {
  update: function( element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
    var googleElement = valueAccessor();
    $(element).html('<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> <script>function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: "en", autoDisplay: false }, " + 'googleElement' + ");}</script>');
  }
};

Use it in your shell.html:

<div id="google_translate_element"></div>
<div data-bind="googleTranslate:'google_translate_element'"></div>