Cách sử dụng Mẫu với Backbone.js cho Tiện ích mở rộng của Chrome trong Tệp kê khai Phiên bản 2

Question

Tôi đang cố sử dụng mẫu cho chế độ xem xương sống của mình. Tôi đã thử nó với underscore.template để làm cho nó chạy. Vấn đề là kể từ khi manifest_version 2 của phần mở rộng chrome có một số hạn chế bảo mật. Tôi nghĩ lý do là vì các khối nội tuyến không được phép nữa. Trong ví dụ nhỏ này, tôi tải một mẫu và cố gắng render nó. Sau đó tôi nhận được lỗi:

Lỗi không bắt buộc: Tạo mã từ chuỗi không được phép cho ngữ cảnh này.

Tôi đã thử nó cũng với Handlebars.js và mẫu ngay trong tệp html của tôi. Nó hoạt động trong một cửa sổ trình duyệt bình thường. Nhưng nó không phải là một phần mở rộng chrome.

Vậy làm cách nào tôi có thể sử dụng các mẫu có backbone.js trong tiện ích mở rộng của chrome với manifest_version 2?

Với gạch dưới (không hoạt động):

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

với tay lái (không hoạt động):

mẫu trong 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> 

và theo quan điểm của tôi:

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

Cả hai Un derscore và Handlebars mẫu chuyển đổi chuỗi thành các hàm JavaScript; ví dụ, 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); 

nên xây dựng một số Javascript và sử dụng new Function để xây dựng một chức năng; Tay lái có thể làm một cái gì đó tương tự. Rõ ràng Chrome không muốn bạn làm những việc như thế trong một phần mở rộng.

Bạn có thể biên dịch trước mẫu và sau đó nhúng hàm trong tiện ích của mình dưới dạng một chút JavaScript đơn giản. Đối với gạch mẫu, bạn có thể 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> 

Vì vậy, bạn có thể t = _.template(your_template) khi đóng gói mở rộng của bạn và đặt văn bản t.source trong phần mở rộng của bạn như là một chức năng Javascript.

Bạn có thể làm những việc tương tự với Handlebars (xem handlebars_assets chẳng hạn).

Cả hai người trong số họ làm phức tạp quá trình xây dựng và đóng gói của bạn nhưng nếu Chrome không muốn bạn xây dựng các chức năng trong phần mở rộng thì bạn không thể làm được gì nhiều.