Verwendung von Vorlagen mit Backbone.js für die Chrome-Erweiterung in Manifest Version 2

Question

Ich versuche, Vorlagen für meine Backbone-Ansichten zu verwenden. Ich habe es mit underscore.template versucht, um es zum Laufen zu bringen. Das Problem ist, dass seit der manifest_version 2 der Chrome-Erweiterungen einige Sicherheitsbeschränkungen bestehen. Ich denke der Grund ist, weil Inline-Blöcke nicht mehr erlaubt sind. In diesem kleinen Beispiel lade ich eine Vorlage und versuche sie zu rendern. Ich bekomme dann den Fehler:

Uncaught Error: Code-Generierung von Zeichenfolgen für diesen Kontext nicht zulässig.

Ich habe es auch mit Handlebars.js und einer Vorlage direkt in meine HTML-Datei versucht. Es funktioniert in einem normalen Browser-Fenster. Aber es ist nicht als Chrome-Erweiterung.

Wie kann ich Vorlagen mit backbone.js in einer Chrome-Erweiterung mit manifest_version 2 verwenden?

Mit Strich (nicht funktioniert):

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

mit Lenker (nicht funktioniert):

Vorlage in 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> 

und meiner Ansicht nach:

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

Beide Un Derscore- und Handlebars-Vorlagen konvertieren Strings in JavaScript-Funktionen; zum Beispiel 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); 

so baut es einige JavaScript und verwendet new Function eine Funktion zu bauen; Lenker macht wahrscheinlich etwas ähnliches. Offensichtlich möchte Chrome nicht, dass du solche Dinge in einer Erweiterung machst.

Sie könnten die Vorlage vorkompilieren und dann die Funktion in Ihre Erweiterung als ein einfaches bisschen JavaScript einbetten. Für Unders vorlagen, konnte man 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> 

So können Sie t = _.template(your_template), während die Erweiterung Verpackung und setzen Sie den t.source Text in Ihrer Erweiterung als JavaScript-Funktion.

Sie können ähnliche Dinge mit dem Lenker tun (siehe zum Beispiel handlebars_assets).

Beide komplizieren den Build- und Verpackungsprozess, aber wenn Chrome nicht möchte, dass Sie Funktionen in einer Erweiterung erstellen, können Sie nicht viel dagegen tun.