I've a backbone view that renders a search result in a underscore template. As I want to highlight the search term in the result I have the following print method in the template:
我有一个骨干视图,可以在下划线模板中呈现搜索结果。由于我想在结果中突出显示搜索词,我在模板中有以下打印方法:
print(someKey.replace(searchTerm, '<b>' + searchTerm + '</b>')
It works as aspected, but I have to set the searchTerm
variable in the global namespace to get this work. I wonder if there is a way to access my views model in the print method, so I could write it like this:
它按预期工作,但我必须在全局命名空间中设置searchTerm变量才能使其工作。我想知道是否有办法在print方法中访问我的视图模型,所以我可以像这样写:
print(someKey.replace(searchTerm, '<b>' + this.model.get('searchTerm') + '</b>')
Or if I could set searchTerm as a local variable in my render function and access it in my template.
或者,如果我可以在我的渲染函数中将searchTerm设置为局部变量并在我的模板中访问它。
Here is the whole Backbone view:
这是整个Backbone视图:
var searchTerm;
var SearchResultView = Backbone.View.extend({
initialize: function() {
this.model.bind('change:rows', this.render, this);
this.model.bind('change:searchTerm', this.clear, this)
},
template: _.template("<tr><td><% print(someKey.replace(searchTerm, '<b>' + searchTerm + '</b>')); %></td></tr>", this),
render: function() {
searchTerm = this.model.get('searchTerm')
_.each(this.model.get('rows'), function(row) {
this.el.append($(this.template(row.doc)));
}, this)
},
clear: function(){
this.el.empty();
}
});
1 个解决方案
#1
8
I'm not sure that I fully understand your question. But I do something along these lines to pass multiple objects into my template function.
我不确定我完全理解你的问题。但我沿着这些方向做了一些事情,将多个对象传递给我的模板函数。
$(this.el).html(_.template(html)($.extend({}, this.model.toJSON(), App.lists.toJSON())))
The jquery extend function lets me merge two objects into one. So in your case you could merge your "searchTerm" in with your model during templating.
jquery扩展函数允许我将两个对象合并为一个。因此,在您的情况下,您可以在模板期间将“searchTerm”与模型合并。
_.template(html)($.extend({}, row.doc, {"searchTerm": searchTerm}))
Your other option would be to pass your entire model into you template function and perform your underscore iteration in the template. Let me know if you need more explanation on that.
您的另一个选择是将整个模型传递到模板函数中,并在模板中执行下划线迭代。如果您需要更多解释,请告诉我。
EDIT:
Here is a link to jquery extend
这是jquery扩展的链接
And underscore also has and extend method if you aren't using jquery
如果你不使用jquery,下划线也有和扩展方法
EDIT EDIT:
This is just to give you an example of my second suggestion. Would probably need some tweaking to throw into yours, but this is the idea.
这只是为了给你一个我的第二个建议的例子。可能需要一些调整才能投入你的,但这是个主意。
template: _.template("
<% _(rows).each(function(row) { %>
<tr><td><% print(someKey.replace(searchTerm, '<b>' + searchTerm + '</b>')); %></td></tr>
<% } %>
"),
render: function(){
this.el.append(this.template(this.model.toJSON()));
}
#1
8
I'm not sure that I fully understand your question. But I do something along these lines to pass multiple objects into my template function.
我不确定我完全理解你的问题。但我沿着这些方向做了一些事情,将多个对象传递给我的模板函数。
$(this.el).html(_.template(html)($.extend({}, this.model.toJSON(), App.lists.toJSON())))
The jquery extend function lets me merge two objects into one. So in your case you could merge your "searchTerm" in with your model during templating.
jquery扩展函数允许我将两个对象合并为一个。因此,在您的情况下,您可以在模板期间将“searchTerm”与模型合并。
_.template(html)($.extend({}, row.doc, {"searchTerm": searchTerm}))
Your other option would be to pass your entire model into you template function and perform your underscore iteration in the template. Let me know if you need more explanation on that.
您的另一个选择是将整个模型传递到模板函数中,并在模板中执行下划线迭代。如果您需要更多解释,请告诉我。
EDIT:
Here is a link to jquery extend
这是jquery扩展的链接
And underscore also has and extend method if you aren't using jquery
如果你不使用jquery,下划线也有和扩展方法
EDIT EDIT:
This is just to give you an example of my second suggestion. Would probably need some tweaking to throw into yours, but this is the idea.
这只是为了给你一个我的第二个建议的例子。可能需要一些调整才能投入你的,但这是个主意。
template: _.template("
<% _(rows).each(function(row) { %>
<tr><td><% print(someKey.replace(searchTerm, '<b>' + searchTerm + '</b>')); %></td></tr>
<% } %>
"),
render: function(){
this.el.append(this.template(this.model.toJSON()));
}