将数据传递给下划线以渲染不起作用 [英] Passing data to underscore for rendering not working
问题描述
我正在尝试渲染一个下划线模板,它是下面的模板
I am trying to render an underscore template which is the one below
div.col-md-12#english
select(value="", class="form-control")
option
| Select Your Language Preference
script(type="text/template" id="english-pref")
<% if (selected === "US") { %>
option(value="US", selected) | United States
<% } else %>
<% if(selected === "US"){ %>
option(value="UK", selected) | United Kingdom
<% } %>
这是我的主干视图代码
app.NotesView = Backbone.View.extend({
el: '#notes',
events: {
'click #save': 'save',
'click #update': 'update'
},
template1: _.template($('#about').html()),
template2: _.template($('#facts').html()),
template3: _.template($('#english').html()),
initialize: function() {
app.NotesModel = new app.NotesModel({});
this.model = app.NotesModel;
app.email = $('#data-user').text();
app.username = $('#data-username').text();
app.NotesModel.fetch({
data: {
email: app.email,
username: app.username
},
type: 'POST',
processData: true,
success: function(data) {
$('#save').remove();
},
complete: function(xhr, textStatus) {
//console.log(textStatus);
},
error: function() {
$('#about-container .note-editable').html('');
$('#note-container .note-editable').html('');
$('#update').remove();
}
});
this.model.bind('sync', this.render, this);
},
render: function() {
this.$('#aboutParent').html(this.template1, this);
this.$('#noteParent').html(this.template2, this);
app.initializeEditor();
$('#about-container .note-editable').html(this.model.attributes.about);
$('#note-container .note-editable').html(this.model.attributes.editorNote);
if(this.model.attributes.english === null || this.model.attributes.english === undefined || this.model.attributes.english === '') {
/*var data = '<option value="US">United States</option><option value="UK">United Kingdom</option>';*/
var data = {"selected": "US"};
this.$('#noteParent').html(this.template3,data);
}else {
var data = {"selected": "UK"};
this.$('#noteParent').html(this.template3,data);
}
}
});
我看了几个教程,我真的很困惑,因为每个教程都有自己的完成任务的方式.我现在面临的问题是我的模板没有呈现,因为它说选定的是未定义的.我是否将对象正确地传递给视图?
I have looked at a couple of tutorials and I am really confused as each one has its own way of getting things done.The problem that I am facing now is that my template is not rendered as it says that selected is undefined. Am I passing the object properly to the view at all ?
还有一种模式可以用作渲染模板的经验法则.
Also is there a pattern that I can use as a rule of thumb for rendering templates.
推荐答案
this.template3
(以及 template1
和 template2
就此而言)是一个函数,您可以将数据作为参数调用以返回 HTML.一般来说:
this.template3
(and template1
and template2
for that matter) is a function which you call with the data as an argument to get the HTML back. In general:
var tmpl = _.template(template_source_text);
var html = tmpl(template_data);
您只是将模板函数传递给 jQuery 的 html
:
You're just passing the template function to jQuery's html
:
this.$('#noteParent').html(this.template3,data);
当你给 html
一个函数时,它调用函数但不使用模板函数期望的参数:
When you hand html
a function, it calls the function but not with the arguments a template function expects:
.html(函数)
类型:函数(整数索引,htmlString oldhtml)=> htmlString
.html( function )
Type: Function( Integer index, htmlString oldhtml ) => htmlString
返回要设置的 HTML 内容的函数.接收集合中元素的索引位置和旧的 HTML 值作为参数.
A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments.
你所做的和说的一样:
this.$('#noteParent').html(this.template3(some_index, some_html));
你想说:
this.$('#noteParent').html(this.template3(data));
以便将 data
中的内容传递给模板函数.
so that the stuff in data
is passed to the template function.
这篇关于将数据传递给下划线以渲染不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!