twitter-bootstrap 如何在单击引导模式时获取引导表行值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23052862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get the bootstrap table row values on clicking bootstrap modal
提问by Kranthi Sama
Iam using ember js with bootstrap i have a table using bootstrap
我正在使用带有引导程序的 ember js 我有一个使用引导程序的表
<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>
now when someone clicks on the table row i am showing bootstrap modal for confirmation
现在当有人点击表格行时，我正在显示引导模式以供确认
<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>
and i want these clicked row details in the ember so that i can process it on the server
我希望这些点击行的详细信息在 ember 中，以便我可以在服务器上处理它
App.ApprovalrequestsController = Ember.ObjectController.extend({
actions: {
pendingAction: function () {
//here i want to get the details of clicked row
//this.transitionToRoute("approvalrequests", rdata);
}
}
});
can anyone tell me how to get the clicked row details in ember
谁能告诉我如何在 ember 中获取单击的行详细信息
采纳答案by melc
There are two issues that need to be solved, passing the selected object/model on an event (eg when clicking the approve button) being able to use a complicated template as content of the modal (eg when clicking on a row the modal could contain a form or data from a master-detail(s) relationship).
有两个问题需要解决，在事件上传递选定的对象/模型（例如，单击批准按钮时）能够使用复杂的模板作为模态的内容（例如，当单击模态可能包含的行时）来自主从关系的表单或数据）。
One approach would be to refresh the content of the modal every time a selection on a row happens. The selection can be handled when clicking the row and the refresh of the (possibly rich/complicated) content of the modal could be achieved by assigning a template to it and binding its rendering to a property.
一种方法是每次发生行上的选择时刷新模态的内容。单击行时可以处理选择，并且可以通过为其分配模板并将其渲染绑定到属性来刷新模式的（可能是丰富/复杂的）内容。
The following example for simplicity has used a partialtemplate to hold the modal's content and simple objects with one property (name) as model.
为简单起见，以下示例使用partial模板来保存模态的内容和具有一个属性 ( name) 作为模型的简单对象。
http://emberjs.jsbin.com/gecehotu/1/edit
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
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);
}
}
});
回答by NicholasJohn16
To get this to work properly, you're going to have to change how you trigger the modal. Instead of using the Bootstrap plugin, it's much better to use Ember to handle it.
要使其正常工作，您将不得不更改触发模态的方式。与其使用 Bootstrap 插件，不如使用 Ember 来处理它。
In your applicationtemplate, add a second named outletfor your modal:
在您的application模板中，添加以outlet您的模态命名的第二个：
<script type="text/x-handlebars">
{{outlet}}
{{outlet modal}}
</script>
Then in your template, add a new actionthat will trigger the opening of the modal and pass the model along with it, like this:
然后在你的模板中，添加一个新的action，将触发模态的打开并传递模型，如下所示：
<script type="text/x-handlebars data-template-name="pending">
<tbody data-link="row" class="rowlink">
{{#each request in model.pending}}
<tr id="ptable" style="cursor: pointer" {{action 'openModal' request}}>
<td id="eid">{{item.id}}</td>
<td>{{request.employee_id}}</td>
<td>{{request.type_id}}</td>
<td>{{request.from_date}}</td>
<td>{{request.to_date}}</td>
<td>{{request.days}}</td>
<td>{{request.status}}</td>
<td>{{request.to_date}}</td>
<td>{{request.to_date}}</td>
</tr>
{{/each}}
</tbody>
</script>
After that, you'll need to setup a modal template like this:
之后，您需要像这样设置一个模态模板：
<script type="text/x-handlebars" data-template-name="pendingrequestmodal">
<div id="pendingrequestsmodal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" {{action 'closeModal'}} aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
{{model.id}}
<button type="button" class="btn btn-default" {{action 'closeModal'}}>Decline</button>
<button type="button" class="btn btn-primary" {{action "pendingAction" model}}>Approve</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop" {{action 'closeModal'}}></div>
</script>
In the openModalaction, we passed in the model as well. This will make it accessible when we react the to the event. You need to listen for the event and render the modal in your route, like this:
在openModal动作中，我们也传入了模型。当我们对事件做出反应时，这将使它可以访问。您需要侦听事件并在您的路线中呈现模态，如下所示：
App.ApplicationRoute = Ember.Route.extend({
actions: {
openModal: function(request) {
this.controllerFor('approvalrequests').set('model',request);
return this.render('pendindrequestmodal', {
into: 'application',
outlet: 'modal',
controller:'approvalrequests'
});
},
closeModal: function() {
return this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
In the action, we're setting the modal property for our controller to the model we passed in and we're setting that controller as the controller for the modal. This will mean we can access the model properties in the template as normal. I also added the closeModalevent that works by disconnecting the outlet.
在动作中，我们将控制器的模态属性设置为我们传入的模型，并将该控制器设置为模态的控制器。这意味着我们可以正常访问模板中的模型属性。我还添加了closeModal通过断开插座来工作的事件。
Finally, we can handle the pendingAction event in your controller. In the modal, we passed the model along with the action, so it's accessible here as well.
最后，我们可以处理控制器中的 pendingAction 事件。在模态中，我们将模型与动作一起传递，因此它也可以在这里访问。
App.ApprovalrequestsController = Ember.ObjectController.extend({
actions: {
pendingAction: function (model) {
this.transitionToRoute("approvalrequests", model);
}
}
});
I kinda guessed on some of your template, route and controller names so they may need to be changed to fit your situation. If something here doesn't work, let me know and I can modify the answer.
我有点猜测您的一些模板、路由和控制器名称，因此可能需要更改它们以适合您的情况。如果这里的某些内容不起作用，请告诉我，我可以修改答案。
You can find instructions and a working example of how to set up a modal dialogue here in the Ember Cookbook.
您可以在 Ember Cookbook 中找到有关如何设置模态对话的说明和工作示例。
回答by Hrishi
You could specify the action on the
您可以在
tr
like this:
像这样：
<tr id="ptable" data-toggle="modal" {{action 'pendingAction' this}} //blah>
Now, when a row is clicked, the controller's method in the actions hash 'pendingAction' is triggered with a parameter which is the row that was clicked on, or more precisely, the object which has materialized into the row.
现在，当单击一行时，操作散列“pendingAction”中的控制器方法将使用一个参数触发，该参数是被单击的行，或者更准确地说，是已具体化到行中的对象。
