マニフェストバージョン2のChrome拡張機能でBackbone.jsでテンプレートを使用する方法

Question

私のバックボーンビューにテンプレートを使用しようとしています。私はunderscore.templateで実行しようとしました。問題は、クロム拡張のmanifest_version 2にいくつかのセキュリティ制限があるためです。なぜなら、インラインブロックはもう許可されないからです。この小さな例では、テンプレートを読み込んでレンダリングしようとしています。

未知のエラー：このコンテキストでは、文字列からのコード生成が許可されていません。

私はHandlebars.jsとテンプレートを使って自分のhtmlファイルにも書きました。通常のブラウザウィンドウで動作します。しかし、それはクロムの延長としてではありません。

したがって、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())) 

Answer 1

両方Un derscoreおよびHandlebarsテンプレートは文字列をJavaScript関数に変換します。例えば、Underscore does it like this：

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

のでそれはいくつかのJavaScriptを構築し、機能を構築するためにnew Functionを使用しています。ハンドルバーはおそらく何か似ています。どうやらChromeは拡張機能のようなことをしたくないと思う。

テンプレートをプリコンパイルして、拡張機能にJavaScriptの単純なビットとして関数を埋め込むことができます。下線のテンプレートの場合、あなたはlook at the source propertyでした：

The source property is available on the compiled template function for easy precompilation.

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

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

ハンドルバーでも同様のことができます（たとえばhandlebars_assetsを参照）。

ビルドとパッケージングのプロセスはどちらも複雑ですが、拡張機能でビルドしたくない場合は、それほど多くはありません。