5

バックボーン ビューにテンプレートを使用しようとしています。underscore.template で実行してみました。問題は、Chrome 拡張機能の manifest_version 2 以降、いくつかのセキュリティ制限があることです。その理由は、インライン ブロックが許可されなくなったためだと思います。この小さな例では、テンプレートをロードしてレンダリングしようとしています。次に、エラーが発生します。

キャッチされないエラー: このコンテキストでは許可されていない文字列からのコード生成。

また、Handlebars.js とテンプレートを html ファイルに入れてみました。通常のブラウザ ウィンドウで動作します。ただし、Chrome 拡張機能としては機能しません。

では、manifest_version 2 の chrome 拡張機能で backbone.js を使用してテンプレートを使用するにはどうすればよいですか?

アンダースコア付き (機能しません):

define [
  'jquery'
  'backbone'
  'lib/facade'
  'text!templates/loginTemplate.js'
],
($, Backbone, facade, LoginTemplate) ->
  'use strict'
  class LoginView extends Backbone.View
    tagName: 'div'
    events: {

    }

    initialize: (options) ->
      @el = options.el

    render: ->
      console.log 'LoginView: render()'
      $(@el).html(_.template(LoginTemplate, {}))

ハンドルバー付き (動作しません):

index.html のテンプレート:

<!-- templates -->
  <script id="loginTemplate" type="text/x-handlebars-template">
    <form class="form-horizontal">
      <fieldset>
        <legend>Login</legend>
        <div class="control-group">
          <label class="control-label" for="email">Email:</label>
          <div class="controls">
            <input type="text" class="input-xlarge" id="email" name="email">
          </div>
        </div>
        <div class="control-group">
          <label class="control-label" for="password">Passwort:</label>
          <div class="controls">
            <input type="password" class="input-xlarge" id="password" name="password">
          </div>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn btn-primary">Login</button>
        </div>
      </fieldset>
    </form>
  </script>

そして私の見解では：

define [
  'jquery'
  'backbone'
  'lib/facade'
],
($, Backbone, facade) ->
  'use strict'
  class LoginView extends Backbone.View
    tagName: 'div'    
    events: {

    }

    initialize: (options) ->
      @el = options.el

    render: ->
      console.log 'LoginView: render()', $("#loginTemplate")
      $(@el).html(Handlebars.compile($("#loginTemplate").html()))
4

1 に答える 1

3

Underscore テンプレートと Handlebars テンプレートはどちらも文字列を JavaScript 関数に変換します。たとえば、 アンダースコアは次のようにします。

source = "var __t,__p='',__j=Array.prototype.join," +
  "print=function(){__p+=__j.call(arguments,'')};\n" +
  source + "return __p;\n";

var render = new Function(settings.variable || 'obj', '_', source);

そのため、いくつかの JavaScriptnew Functionを作成し、関数を作成するために使用します。ハンドルバーはおそらく似たようなことをします。どうやらChromeは、拡張機能でそのようなことをしたくないようです。

テンプレートをプリコンパイルしてから、関数を単純な JavaScript として拡張機能に埋め込むことができます。Underscore テンプレートの場合、次のsourceプロパティを確認できます。

sourceプロパティは、コンパイルされたテンプレート関数で使用できるため、簡単に事前コンパイルできます。

<script>
  JST.project = <%= _.template(jstText).source %>;
</script>

そのt = _.template(your_template)ため、拡張機能をパッケージ化し、t.sourceテキストを拡張機能に JavaScript 関数として配置することができます。

ハンドルバーでも同様のことができます (たとえば、handlebars_assets を参照してください) 。

どちらもビルドとパッケージ化のプロセスを複雑にしますが、拡張機能で関数をビルドすることを Chrome が望まない場合、できることはあまりありません。

于 2012-07-02T19:08:07.633 に答える