comment obtenir le bootstrap ligne de la table de valeurs en cliquant sur bootstrap modal

Il y a deux problèmes qui doivent être résolus, en passant de l'objet sélectionné/modèle sur un événement (par exemple, lorsque vous cliquez sur le bouton d'approbation) être en mesure d'utiliser un complexe modèle de contenu de l'modal (par exemple en cliquant sur une ligne du modal pourrait contenir un formulaire ou de données à partir d'un maître-détail(s) de relation).

Une approche possible serait d'actualiser le contenu de la modale à chaque fois une sélection sur une ligne qui se passe. La sélection peut être manipulé lorsque vous cliquez sur la ligne et l'actualisation de l' (éventuellement riche/compliqué) contenu de l'modal pourrait être atteint par l'affectation d'un modèle et la liaison de son rendu à une propriété.

L'exemple suivant pour plus de simplicité a utilisé un partial modèle pour tenir le modal du contenu et des objets simples avec une propriété (name) comme modèle.

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">&times;</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);
}
}
});

OriginalL'auteur melc

À obtenir que cela fonctionne correctement, vous allez avoir à changer la façon dont vous déclenchez le modal. Au lieu d'utiliser le plugin Bootstrap, c'est beaucoup mieux d'utiliser des Braises pour le manipuler.

Dans votre application modèle, ajouter un second outlet pour votre modal:

<script type="text/x-handlebars">
{{outlet}}
{{outlet modal}}
</script>

Ensuite dans votre modèle, ajouter un nouveau action qui va déclencher l'ouverture de la modal et de passer le modèle avec elle, comme ceci:

<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>

Après cela, vous aurez besoin de l'installation d'un modal modèle comme celui-ci:

<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">&times;</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>

Dans le openModal action, nous avons passé dans le modèle. Cela permettra de rendre accessible lorsque nous réagir à l'événement. Vous devez écouter l'événement, et de rendre le modal dans votre itinéraire, comme ceci:

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'
});
}
}
});

Dans l'action, nous sommes à la définition de la propriété modal pour notre contrôleur du modèle, nous avons réussi à et nous la mettons que le contrôleur le contrôleur du modal. Cela signifie que nous pouvons accéder aux propriétés du modèle dans le modèle normal. J'ai aussi ajouté le closeModal événement qui travaille en débranchant la prise de courant.

Enfin, nous pouvons nous occuper de la pendingAction événement dans votre contrôleur. Dans le modal, nous avons adopté le modèle avec l'action, de sorte qu'il est accessible ici.

App.ApprovalrequestsController = Ember.ObjectController.extend({
actions: {
pendingAction: function (model) {
this.transitionToRoute("approvalrequests", model);
}
}
});

J'ai un peu deviné sur certains de votre modèle, la voie et le contrôleur de noms, ils ont donc besoin d'être changé pour s'adapter à votre situation. Si quelque chose ne fonctionne pas, faites le moi savoir et je peux modifier la réponse.

Vous pouvez trouver des instructions et un exemple de comment mettre en place un dialogue modale ici, dans le livre de cuisine de Braise.

OriginalL'auteur NicholasJohn16