下划线中的部分模板(就像在车把中一样)
Partials template in underscore (just like in handlebars)?
我有这样的骨干模型
var PeopleModel = Backbone.Model.extend({
defaults: {
"people": [
{ "username": "alan", "firstName": "Alan", "lastName": "Johnson", "phone": "1111", "email": "alan@test.com" },
{ "username": "allison", firstName: "Allison", "lastName": "House", "phone": "2222", "email": "allison@test.com" },
{ "username": "ryan", "firstName": "Ryan", "lastName": "Carson", "phone": "3333", "email": "ryan@test.com" },
{ "username": "ed", "firstName": "Edward", "lastName": "Feild", "phone": "4444", "email": "ed@test.com" },
{ "username": "phil", "firstName": "Philip", "lastName": "Doom", "phone": "5555", "email": "phil@test.com" },
{ "username": "gerald", "firstName": "Gerald", "lastName": "Butler", "phone": "6666", "email": "gerald@test.com" }
],
"company": {"name": "Random Corp."},
"country": "England"
}
});
以下是我的模板
<script id="people-template" type="text/x-handlebars-template">
{{#each people}}
{{> person}}
{{/each}}
</script>
<script id="person-partial" type="text/x-handlebars-template">
<div class="person">
<h2>{{fullName}} </h2>
<div class="phone">{{phone}}</div>
<div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
</div>
这就是我使用车把实现部分的方式.js。
我的问题
1.Do 我们有类似的东西,我的意思是下划线.js模板引擎中的部分?
2.如果是这样,我们如何在下划线.js模板引擎中实现部分
不,Underscore 的模板中没有本机部分支持。但是,您可以将几乎任何您想要的 JavaScript 放入 <% ... %>
;特别是,您可以调用自己的函数,这样您就可以毫无困难地添加部分内容。你可以有一个这样的模板:
<script id="people-template" type="text/x-handlebars-template">
<% _(people).each(function(person) { %>
<%= partial('person', person) %>
<% }) %>
</script>
然后将partial
函数添加到window
:
window.partial = function(which, data) {
var tmpl = $('#' + which + '-partial').html();
return _.template(tmpl)(data);
};
演示:http://jsfiddle.net/ambiguous/HDuj5/9/
这并不像 Handlebars 中的{{> ... }}
那么光滑和漂亮,但 Underscore 的模板是 JavaScript 本身的一个非常薄的包装器,这在一定程度上限制了你。您可以使用命名空间来避免将内容直接放入window
,也可以使用 {variable: ...}
选项来_.template
并使用包装器来设置标准帮助程序。
或者为了避免使用全局范围,您可以混合使用全局模板帮助程序,如下所示:
(function() {
var originalUnderscoreTemplateFunction = _.template;
var templateHelpers = {};
_.mixin({
addTemplateHelpers : function( newHelpers ) {
_.extend( templateHelpers, newHelpers );
},
template : function(text, data, settings) {
// replace the built in _.template function with one that supports the addTemplateHelpers
// function above. Basically the combo of the addTemplateHelpers function and this new
// template function allows us to mix in global "helpers" to the data objects passed
// to all our templates when they render. This replacement template function just wraps
// the original _.template function, so it sould be pretty break-resistent moving forward.
if( data )
{
// if data is supplied, the original _.template function just returns the raw value of the
// render function (the final rentered html/text). So in this case we just extend
// the data param with our templateHelpers and return raw value as well.
_.defaults( data, templateHelpers ); // extend data with our helper functions
return originalUnderscoreTemplateFunction.apply( this, arguments ); // pass the buck to the original _.template function
}
var template = originalUnderscoreTemplateFunction.apply( this, arguments );
var wrappedTemplate = function( data ) {
_.defaults( data, templateHelpers );
return template.apply( this, arguments );
};
return wrappedTemplate;
}
}
}
然后打电话
_.addTemplateHelpers( {
partial : function() {
return _.template(
$('#' + which + '-partial').html(),
data
);
}
} );
这是github上下划线mixin的链接。
我认为这与Dave的答案相似,但可能需要更少的代码:
function partialTemplate(origTemplate, partialValues){
return function(values){
return origTemplate(_.defaults(values, partialValues));
};
}
用法示例:
var t = _.template('<%= val1 %>,<%= val2 %>'); // original template requiring 2 values
var pt = partialTemplate(t, {val1:1}); // partial template with 1 value pre-populated
pt({val2:2}); // returns '1,2'
pt({val2:3}); // returns '1,3'
相关文章:
- es6 相当于下划线查找位置
- 用空格替换下划线PHP
- 如何使用下划线js转换这些数据
- 带嵌套json的下划线js查找
- 如何逃离<>在javascript下划线模板中
- TinyMCE从MSWord粘贴的文本在所有文本下加下划线
- 使用lodash下划线基于键拆分jsonarray
- 在控制台中显示下划线变量
- 如何从另一个带下划线的数组中筛选带元素的数组
- 筛选下划线中的对象
- 在键值对中对求和值进行下划线
- 使用下划线将键和值的两个数组合并到一个对象中
- 如何将文件名中的斜线替换为下划线
- 如何在结果中添加下划线但不添加虚假值的情况下进行映射
- 下划线用句点扩展.旋转引号被删除,如何用引号获得它
- 如何将id数组与带下划线的对象数组嵌套属性进行比较
- 多行下划线模板和_
- 下划线模板不是不显示弹出框功能
- 我如何使用下划线模板(<%%>),就像我在PHP中使用它一样(lt;?PHP?>
- 下划线中的部分模板(就像在车把中一样)