Geek asks and answers

How to use templates with Backbone.js to extend Chrome in Manifest version 2

im trying to use templates for my basic views. I tried this with underscore.template to run it. The problem is that there are some security restrictions with the manifest_version 2 chrome extension. I think the reason is that inline blocks are no longer allowed. In this small example, I download a template and try to display it. Then I get the error message:

Fault Error: code generation from lines forbidden for this context.

I tried this also with Handlebars.js and the template directly in my html file. It works in a normal browser window. But this is not like an extension of chrome.

So how can I use templates with backbone.js in the chrome extension with manifest_version 2?

Underlined (not working):

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

with handles (does not work):

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>

and, in my opinion:

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()))
+5
source share
1 answer

Underscore and Handlebars patterns convert strings to JavaScript functions; for example, Underline does this as follows:

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

therefore, it creates some JavaScript and uses new Functionto build the function; The steering probably does something similar. Obviously, Chrome doesn't want you to do such things in the extension.

, JavaScript. Underscore source:

source .

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

, t = _.template(your_template) t.source JavaScript.

Handlebars (. handlebars_assets).

, Chrome , , .

+3

More articles:


All Articles