Omurga görünümlerim için şablonlar kullanmaya çalışırken, Manifest Sürüm 2

Question

Chrome Uzantısı için Backbone.js ile Şablonlar nasıl kullanılır. Çalıştırmak için underscore.template ile denedim. Sorun şu ki, krom uzantılarının manifest_version 2'sinden bazı güvenlik kısıtlamaları vardır. Bunun sebebi, satır içi bloklara artık izin verilmemesidir. Bu küçük örnekte bir şablon yüklüyorum ve oluşturmaya çalışıyorum. Bu bağlamda için izin verilmeyen dizeleri Kod nesli:

Yakalanmayan Hata: Sonra hata alıyorum.

Ben Handlebars.js ve sağ benim html-dosyasına bir şablonla da denedim. Normal bir tarayıcı penceresinde çalışır. Fakat bir krom uzantısı olarak değil.

Peki ben manifest_version 2 ile krom uzantısı backbone.js ile şablonlarını kullanabilirsiniz? alt çizgi ile

(çalışmıyor): Gidon ile

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

(çalışmıyor):

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

ve görünümde: index.html içinde

şablon

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

İkisi Un derscore ve Handlebars şablonları dizeleri JavaScript işlevlerine dönüştürür; örneğin, 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); 

yüzden bazı JavaScript inşa eder ve bir işlevi oluşturmak için new Function kullanır; Gidonlar muhtemelen benzer bir şey yapar. Görünüşe göre Chrome, uzantıda böyle şeyler yapmak istemiyor.

Sen şablonu derleme ve ardından JavaScript basit bit olarak Uzantınızda işlevini katıştırabilir. Underscore şablonlarında, look at the source property olabilir:

The source property is available on the compiled template function for easy precompilation.

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

Yani yapabilirsiniz t = _.template(your_template) Uzantınızı ambalaj ve bir JavaScript fonksiyonu olarak Uzantınızda t.source metni koyarken.

Sen Gidonu (örneğin handlebars_assets bakınız) ile benzer şeyler yapabilirsiniz.

Her ikisi de yapı ve paketleme işlemlerinizi zorlaştırıyor, ancak Chrome bir uzantıda işlevler oluşturmanızı istemiyorsa, bu konuda yapabileceğiniz fazla bir şey yok.