杜伦达尔谷歌翻译答案

【问题标题】：Durundal Google Translate杜伦达尔谷歌翻译
【发布时间】：2013-12-31 19:39:05
【问题描述】：

如何在 Durundal Shell.js、shell.html 中绑定谷歌翻译？

html

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

脚本

<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');
        }

【问题讨论】：

标签： javascript jquery asp.net knockout.js durandal

【解决方案1】：

查看 Durandal 的合成功能：http://durandaljs.com/documentation/Using-Composition/

例子：

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

【讨论】：

您应该将您的脚本放在google_translate.html 中并在compositionComplete 中触发函数

【解决方案2】：

Durandal 不会在视图中呈现脚本标签。为了渲染它们，你应该使用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>');
  }
};

在你的 shell.html 中使用它：

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

【讨论】：