如何在清單版本2中使用帶Backbone.js的Chrome擴展模板

Question

即時嘗試爲我的骨幹視圖使用模板。我用underscore.template試着讓它運行。問題是，由於chrome擴展的manifest_version 2有一些安全限制。我認爲這是因爲內聯塊不再被允許。在這個小例子中，我加載一個模板並嘗試渲染它。然後我得到錯誤：

未捕獲錯誤：從字符串不允許的代碼生成此上下文。

我也試過用Handlebars.js和一個模板直接進入我的html文件。它在一個正常的瀏覽器窗口中工作。但它不會作爲Chrome擴展。

因此，如何能我用Backbone.js的模板，在Chrome擴展與manifest_version 2？

以下劃線（不工作）：

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, {})) 

與車把（不工作）：

<!-- 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> 

在我看來：index.html中

模板

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)而打包的擴展，把t.source文本在您的分機作爲一個JavaScript函數。

你可以用把手做類似的事情（例如見handlebars_assets）。

它們都會讓你的構建和打包過程變得複雜，但是如果Chrome不想讓你在擴展中構建函數，那麼你可以做的事情就不多了。