我正在使用 ember js 和 bootstrap 我有一个使用 bootstrap 的表
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Request Id</th>
<th>Applied By</th>
<th>Leave Type</th>
<th>Leave From</th>
<th>Leave To</th>
<th>Days</th>
<th>Status</th>
<th>Applied date</th>
<th>Applied/Declined date</th>
</tr>
</thead>
<tbody data-link="row" class="rowlink">
{{#each model.pending}}
<tr id="ptable" data-toggle="modal" data-target="#pendingrequestsmodal" style="cursor: pointer">
<td id="eid">{{id}}</td>
<td>{{employee_id}}</td>
<td>{{type_id}}</td>
<td>{{from_date}}</td>
<td>{{to_date}}</td>
<td>{{days}}</td>
<td>{{status}}</td>
<td>{{to_date}}</td>
<td>{{to_date}}</td>
</tr>
{{/each}}
</tbody>
</table>
现在,当有人单击表格行时,我将显示 Bootstrap 模式以进行确认
<div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal">Decline</button>
<button type="button" class="btn btn-primary" {{action "pendingAction" target="controller" }}>Approve</button>
</div>
</div>
</div>
我想要这些被点击的行详细信息在 ember 中,以便我可以在服务器上处理它
App.ApprovalrequestsController = Ember.ObjectController.extend({
actions: {
pendingAction: function () {
//here i want to get the details of clicked row
//this.transitionToRoute("approvalrequests", rdata);
}
}
});
谁能告诉我如何在 ember 中获取点击的行详细信息
最佳答案
有两个问题需要解决,在事件上传递选定的对象/模型(例如,单击批准按钮时)能够使用复杂的模板作为模式的内容(例如,单击一行时)模式可以包含来自主从关系的表单或数据)。
一种方法是每次选择一行时刷新模式的内容。单击行时可以处理选择,并且可以通过为其分配模板并将其渲染绑定(bind)到属性来实现模式(可能丰富/复杂)内容的刷新。
为简单起见,以下示例使用 partial
模板来保存模式的内容和具有一个属性 (name
) 作为模型的简单对象。
http://emberjs.jsbin.com/gecehotu/1/edit
hbs
<script type="text/x-handlebars" data-template-name="index">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>color</th>
</tr>
</thead>
<tbody data-link="row" class="rowlink">
{{#each model}}
<tr id="ptable" data-toggle="modal" data-target="#pendingrequestsmodal" style="cursor: pointer" {{action "selectColor" this target="view"}}>
<td>{{name}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{#if selectedColor}}
{{partial "popup"}}
{{/if}}
</script>
<script type="text/x-handlebars" data-template-name="_popup">
<div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
<br/>
{{selectedColor.name}}
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal">Decline</button>
<button type="button" class="btn btn-primary" {{action "pendingAction" selectedColor target="controller" }}>Approve</button>
</div>
</div>
</div>
</script>
js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [{name:'red'}, {name:'yellow'}, {name:'blue'}];
}
});
App.IndexController = Ember.ArrayController.extend({
selectedColor:null,
actions:{
pendingAction:function(color){alert("the color is:"+color.name);}
}
});
App.IndexView = Ember.View.extend({
actions:{
selectColor:function(color){
this.controller.set("selectedColor",color);
}
}
});
关于jquery - 如何在单击 Bootstrap 模式时获取 Bootstrap 表行值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23052862/