获取表中某个特定行的值并删除一行 [英] To get value of one particular row in a table and deletion of a row
问题描述
我使用句柄来渲染带有每个具有编辑按钮的数据的表格。我需要知道，如果第二行中的编辑按钮被点击，如何获取该行中的值。
Html就是这个
< table class =table table-bordered>
< thead>
< tr>
< th>模型< / th>
< th>品牌< / th>
年份< / th>
< th>动作< / th>
< / tr>
< tr>
< td>< input class =form-controlid =modelname>< / td>
< td>< input class =form-controlid =brandname>< / td>
< td>< input class =form-controlid =yearname>< / td>
< td>< button class =btn btn-primary add>添加< /按钮><按钮等级=btn btn-primary update>更新< /按钮>< / td> ;
< / tr>
< / thead>
< tbody class =product-list>
< / tbody>
< / table>
< / div>
< script id =list-itemtype =text / x-handlebars-template>
{{#each this}}
< div class =list-item>
< tr>
< td> {{model}}< / td>
< td> {{品牌}}< / td>
< td> {{year}}< / td>
< td>< button class =btn btn-info edit>编辑< / button>& nbsp;< button class =btn btn-danger delete>删除< / button> < / TD>
< / tr>
< / div>
{{/ each}}
< / script>
脚本是
var Product = Backbone.Model.extend（{
}）;
var ProductList = Backbone.Collection.extend（{
model：Product
}）;
ProductView = Backbone.View.extend（{
el：'.table-bordered'，
events：{
'click .add'：'create '，
'click .edit'：'edit'，
'click .update'：'update'，
'click .delete'：'delete'
}，$ （）;
this.collection = new ProductList（）;
this.listenTo（this.collection，添加，this.render，this）;
this.listenTo（this.collection，edit，this.render，this）;
this.listenTo（this.collection，change，this .render，this）;
this.listenTo（this.model，delete，this.render，this）;
}，
render：function（）{
var source = $（＃list-item）。html（）;
var template = Handlebars.compile（source）;
$（'。产品列表'）。html（template（this.collection.toJSON（）））
}，
create：function（）{
// var product = new Product （）;
this.model = new Pro duct（）;
var modelname = document.getElementById（'modelname'）.value;
var brandname = document.getElementById（'brandname'）.value;
var yearname = document.getElementById（'yearname'）。value;
this.model.set（{$ b $'model'：modelname，
'brand'：brandname，
'year'：yearname
}）
this.collection.add（this.model）;
$（'＃modelname'）。val（）;
$（'＃brandname'）。val（）;
$（'＃yearname'）。val（）;
}，
编辑：function（e）{
var jsondata = this.model.toJSON（）;
console.log（jsondata.model）;
$（'＃modelname'）。val（jsondata.model）;
$（'＃brandname'）。val（jsondata.brand）;
$（'＃yearname'）。val（jsondata.year）;
$ b}，
update：function（）
{
// var product = new Product（）;
var modelname = document.getElementById（'modelname'）.value;
var brandname = document.getElementById（'brandname'）.value;
var yearname = document.getElementById（'yearname'）。value;
this.model.set（{
'model'：modelname，
'brand'：brandname，
'year'：yearname
}）
$（ '＃MODELNAME'）VAL（ ）。
$（'＃brandname'）。val（）;
$（'＃yearname'）。val（）;
}，
delete：function（）
{
console.log（JSON.stringify（this.model））;
this.model.destroy（）;
}
}）;
var productView = new ProductView（）;
我的问题是，单击编辑时，只有记录数组中的最后一个元素被填充到文本框进行编辑。甚至删除不起作用。我不确定我出错的地方。请修正。 解决方案
您的方法存在的问题是每次点击添加之后，您都会创建一个新模型，很好。
但是，然后你在this.model中缓存最后创建的模型，这是你的问题所在。您只缓存最后一个模型。相反，您应该想办法检测要删除的模型，并确定您必须从DOM中移除的行。
您应该为此创建一个子视图视图和显然模板相同，以显示每个模型的不同视图。然后将该视图添加到此视图中。
例如
将初始化中的代码更改为
b$ b
this.listenTo（this.collection，add，this.add）;
this.listenTo（this.collection，edit，this.edit）;
this.listenTo（this.collection，change，this.change）;
this.listenTo（this.collection，delete，this.delete）;
其中每个添加，编辑，更改，删除都会收到要添加的模型，编辑，更改，删除当您添加逻辑与子视图中的父视图通信使用
this.model.collection.trigger （'delete'，this.model）;
和编辑，变更和更新相同。
希望它有帮助。
I used handlebars to render table with data with each having edit button . I need to know like, if the edit button in second row is clicked, how to fetch the values in that particular row.
Html is this
<table class="table table-bordered">
<thead>
<tr>
<th>Model</th>
<th>Brand</th>
<th>Year</th>
<th>Action</th>
</tr>
<tr>
<td><input class="form-control" id="modelname"></td>
<td><input class="form-control" id="brandname"></td>
<td><input class="form-control" id="yearname"></td>
<td><button class="btn btn-primary add">Add</button><button class="btn btn-primary update">Update</button></td>
</tr>
</thead>
<tbody class="product-list">
</tbody>
</table>
</div>
<script id="list-item" type="text/x-handlebars-template">
{{#each this}}
<div class="list-item">
<tr>
<td>{{ model }}</td>
<td>{{ brand }}</td>
<td>{{ year }}</td>
<td><button class="btn btn-info edit">Edit</button> <button class="btn btn-danger delete">Delete</button></td>
</tr>
</div>
{{/each}}
</script>
And script is
var Product = Backbone.Model.extend({
});
var ProductList = Backbone.Collection.extend({
model: Product
});
var ProductView = Backbone.View.extend({
el: '.table-bordered',
events: {
'click .add': 'create',
'click .edit':'edit',
'click .update':'update',
'click .delete':'delete'
},
initialize: function(){
// this.model=new Product();
this.collection = new ProductList();
this.listenTo(this.collection, "add", this.render, this);
this.listenTo(this.collection, "edit", this.render, this);
this.listenTo(this.collection, "change", this.render, this);
this.listenTo(this.model,"delete", this.render, this);
},
render: function(){
var source = $("#list-item").html();
var template = Handlebars.compile(source);
$('.product-list').html(template(this.collection.toJSON()))
},
create: function(){
//var product = new Product();
this.model=new Product();
var modelname= document.getElementById('modelname').value;
var brandname=document.getElementById('brandname').value;
var yearname= document.getElementById('yearname').value;
this.model.set({
'model': modelname,
'brand': brandname,
'year': yearname
})
this.collection.add(this.model);
$('#modelname').val("");
$('#brandname').val("");
$('#yearname').val("");
},
edit:function(e){
var jsondata=this.model.toJSON();
console.log(jsondata.model);
$('#modelname').val(jsondata.model);
$('#brandname').val(jsondata.brand);
$('#yearname').val(jsondata.year);
},
update:function()
{
// var product = new Product();
var modelname= document.getElementById('modelname').value;
var brandname=document.getElementById('brandname').value;
var yearname= document.getElementById('yearname').value;
this.model.set({
'model': modelname,
'brand': brandname,
'year': yearname
})
$('#modelname').val("");
$('#brandname').val("");
$('#yearname').val("");
},
delete:function()
{
console.log(JSON.stringify(this.model));
this.model.destroy();
}
});
var productView = new ProductView();
My problem is, on click on edit,only the last element in array of records is getting populated onto text box for editing. And even delete doesn't work . I ain't sure where i went wrong. Please rectify.
The problem with your approach is every time after clicking on Add you are creating a new model till this point everything is fine. But then you are caching the lastly created model in this.model that is where your problem is. You are caching only last model. instead you should think of approach to detect model to be deleted and to identify its row which you will have to remove from DOM.
You should create one child-view of this view and obviously template for the same, in order to show each model as different view. Then append that view to this view
e.g.
change the code in initialize to following
this.listenTo(this.collection, "add", this.add);
this.listenTo(this.collection, "edit", this.edit);
this.listenTo(this.collection, "change", this.change);
this.listenTo(this.collection, "delete", this.delete);
where each of your add,edit,change,delete will receive a model which is to be added,edited,changed,deleted when you add logic to communicate with parent view in child view by using
this.model.collection.trigger('delete', this.model);
and same for edit,chage,update.
Hope it helps.
这篇关于获取表中某个特定行的值并删除一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
