我正在尝试使用其他视图中的所选名称列表附加HTML TD标记。它会产生一个空div标签。列表包含逗号分隔值。你能解释一下如何将属性附加到视图元素吗?
以下是基本视图中的代码,它将TD作为视图元素传递。
base view
--------
var model = new DataNames();
var view = new SearchDataView({
model:model
});
view.render().showModal({
x: event.pageX,
y: event.pageY
});
var dName = new DataNamesView({
el: "#dataName" // this needs to be populated
});
dName.render();
subview 1 --- this view gets called from base view
SearchDataView = Backbone.ModalView.extend(
{
name: "SearchDataView",
model: DataNames,
templateHtml :
"<div id='select'><span>Search name</span>" +
"<table border='1'>"+
"<tr>"+
"<td><input type='checkbox' value='test1'></td>"+
"<td name='selected'>test1</td>"+
"<td></td>"+
"<td></td></tr>"+
"<tr>"+
"<td><input type='checkbox' value='test2'></td>"+
"<td name='selected'>test2</td>"+
"<td></td>"+
"<td></td></tr>"+
"</table><button id='select'>Select</button></div>",
initialize: function(){
_.bindAll( this, "render");
this.template = _.template( this.templateHtml);
},
events: {
"click #select": "select"
},
select: function(){
var allVals = [];
$('#select :checked').each(function() {
allVals.push($(this).val());
});
alert(allVals);
this.model.set("name",allVals);
var dName = new DataNamesView({selectedList: allVals});
dName.render();
this.hideModal();
},
render: function(){
$(this.el).html(this.templateHtml);
return this;
}
});
subview 2
----------
DataNamesView = Backbone.ModalView.extend(
{
name: "DataNamesView",
initialize: function(){
_.bindAll( this, "render");
var selectedList = this.options.selectedList;
},
events: {
},
render: function(name){
alert("selected from names view"+this.options.selectedList);
this.el.innerHTML = "testing";// this works fine
// $(this.el).html(this.options.selectedList); //does not work
//this.el.innerHTML = this.options.selectedList;//does not work
//this.$el.append(this.options.selectedList); //does not work
return this;
}
});