I am getting a little confused about templating using backbone with jade/underscore.
我对使用带有玉/下划线的骨干进行模板操作感到有些困惑。
I have a backbone model with a couple of arrays in it and am not sure how to render the array attributes. I could move them into a separate backbone collection & view but that seem like overkill in this case.
我有一个骨干模型,里面有几个数组,我不知道如何渲染数组属性。我可以将它们移动到一个单独的骨干集合和视图中,但在这种情况下看起来有点过分。
I followed this blog post on using backbone with jade and added the following to my backbone file
我关注使用骨干与jade的博文,并将以下内容添加到我的骨干文件中
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
which allows me to render the model attributes in this manor :
这允许我在这个庄园中渲染模型属性:
//in my JavaScript
this.template = _.template($("#some-template").html());
//in my .jade template
input.text(type='text', name="name", value='{{name}}')
what I want to work out is how to do a simple loop over one of the arrays in the model. e.g.
我想解决的是如何在模型中的一个数组上进行简单的循环。例如
- for (var child in children)
{{child}}
but im quite confused about the correct syntax, where jade starts and underscore takes over etc. Thank you.
但我对正确的语法非常困惑,其中jade开始和下划线接管等等。谢谢。
1 个解决方案
#1
5
You can't use jade in the browser (Well you probably technically can but it's not that common to use with backbone as opposed to underscore). You'll be using underscore templates there. The docs on _.template show that you can evaluate javascript and use the _.each method to loop over your model's array attributes.
你不能在浏览器中使用jade(嗯,你可能在技术上可以,但是使用骨干而不是下划线并不常见)。你将在那里使用下划线模板。 _.template上的文档显示您可以评估javascript并使用_.each方法循环模型的数组属性。
It'll end up looking like this inside your view's render function. You'll want to cache the template function as an attribute of your view for efficiency, but I have it inline here for simplicity. Assume for example you have a Car model with a list of drivers as an array of driver names.
它最终会在视图的渲染功能中看起来像这样。您需要将模板函数缓存为视图的属性以提高效率,但为简单起见,我将其内联到此处。例如,假设您有一个Car模型,其中包含驱动程序列表作为驱动程序名称数组。
var template = "<% _.each(model.drivers, function(name) { %> <li><%= name %></li> <% }); %>";
return _.template(template, this);
Note that you will need to provide an evaluate syntax in your template settings as this example includes both the interpolate style (<%=) and the evaluate style (<%) of template markup. Currently you just have mustache style interpolation and that isn't sufficient.
请注意,您需要在模板设置中提供评估语法,因为此示例包括插值样式(<%=)和模板标记的评估样式(<%)。目前你只有胡子样式插值,这是不够的。
#1
5
You can't use jade in the browser (Well you probably technically can but it's not that common to use with backbone as opposed to underscore). You'll be using underscore templates there. The docs on _.template show that you can evaluate javascript and use the _.each method to loop over your model's array attributes.
你不能在浏览器中使用jade(嗯,你可能在技术上可以,但是使用骨干而不是下划线并不常见)。你将在那里使用下划线模板。 _.template上的文档显示您可以评估javascript并使用_.each方法循环模型的数组属性。
It'll end up looking like this inside your view's render function. You'll want to cache the template function as an attribute of your view for efficiency, but I have it inline here for simplicity. Assume for example you have a Car model with a list of drivers as an array of driver names.
它最终会在视图的渲染功能中看起来像这样。您需要将模板函数缓存为视图的属性以提高效率,但为简单起见,我将其内联到此处。例如,假设您有一个Car模型,其中包含驱动程序列表作为驱动程序名称数组。
var template = "<% _.each(model.drivers, function(name) { %> <li><%= name %></li> <% }); %>";
return _.template(template, this);
Note that you will need to provide an evaluate syntax in your template settings as this example includes both the interpolate style (<%=) and the evaluate style (<%) of template markup. Currently you just have mustache style interpolation and that isn't sufficient.
请注意,您需要在模板设置中提供评估语法,因为此示例包括插值样式(<%=)和模板标记的评估样式(<%)。目前你只有胡子样式插值,这是不够的。