如何在Manifest版本2中使用Backbone.js模板進行Chrome擴展

Question

我試圖使用模板作為我的骨干視圖。 我用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()))

Answer 1

Underscore和Handlebars模板都將字符串轉換為JavaScript函數; 例如， Underscore就是這樣的 ：

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嵌入擴展中。 對於Underscore模板，您可以查看source屬性 ：

源屬性在編譯的模板函數上可用，以便於預編譯。

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

因此，您可以在打包擴展時t = _.template(your_template)並將t.source文本作為JavaScript函數放在擴展中。

您可以使用Handlebars執行類似的操作（例如，請參閱handlebars_assets ）。

它們都會使您的構建和打包過程變得復雜，但如果Chrome不希望您在擴展中構建功能，那么您無法做到這一點。