如何在清单版本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不想让你在扩展中构建函数，那么你可以做的事情就不多了。