我正在尝试为我的主干 View 使用模板。我用 underscore.template 尝试让它运行。问题在于,由于 manifest_version 2 的 chrome 扩展存在一些安全限制。我认为原因是因为不再允许内联 block 。在这个小例子中,我加载了一个模板并尝试渲染它。然后我得到错误:
Uncaught Error :此上下文不允许从字符串生成代码。
我也尝试过使用 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, {}))
带 Handlebars (不工作):
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()))
最佳答案
Underscore 和 Handlebars 模板都将字符串转换为 JavaScript 函数;例如,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);
因此它构建了一些 JavaScript 并使用 new Function
构建了一个函数; Handlebars 可能会做类似的事情。显然 Chrome 不希望你在扩展程序中做那样的事情。
您可以预编译模板,然后将函数作为一段简单的 JavaScript 嵌入到您的扩展中。对于下划线模板,您可以 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>
因此,您可以在打包扩展时 t = _.template(your_template)
并将 t.source
文本作为 JavaScript 函数放入扩展中。
您可以使用 Handlebars 做类似的事情(例如参见 handlebars_assets)。
它们都会使您的构建和打包过程复杂化,但如果 Chrome 不希望您在扩展中构建函数,那么您无能为力。
关于javascript - 如何在 list 版本 2 中将模板与 Backbone.js 一起用于 Chrome 扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11298808/