wie man die bootstrap-Tabelle Zeile Werte, die bei anklicken die bootstrap modal

Gibt es zwei Probleme, die gelöst werden müssen, übergeben Sie das ausgewählte Objekt/Modell auf ein Ereignis (z.B. beim klicken auf den genehmigen-button) in der Lage, verwenden eine komplizierte Vorlage als Inhalt des modalen (z.B. beim Klick auf eine Zeile der modal-könnte eine form oder die Daten von einer master-detail(s) - Beziehung).

Ein Ansatz wäre zum aktualisieren der Inhalte der modalen jedes mal, wenn Sie eine Auswahl auf eine Zeile passiert. Die Auswahl kann behandelt werden, wenn durch klicken auf die Zeile und die Aktualisierung der (möglicherweise Reich/kompliziert) Inhalt des modal, könnte erreicht werden, durch zuweisen einer Vorlage, und binden die Darstellung einer Eigenschaft.

Folgenden Beispiel für die Einfachheit hat eine partial Vorlage zu halten, den modal-content und einfache Objekte mit einer Eigenschaft (name) als Modell.

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

InformationsquelleAutor melc

Bekommen, damit Sie richtig funktionieren, Sie gehen zu müssen, um zu ändern, wie lösen Sie den modal. Statt der Verwendung der Bootstrap-plugin, es ist viel besser, um Ember zu behandeln.

In Ihrem application Vorlage, fügen Sie eine zweite namens outlet für Ihre modal:

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

Dann in Ihre Vorlage, fügen Sie eine neue action Auslöser, wird die Eröffnung des modal, und übergeben Sie das Modell zusammen mit, wie diese:

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

Nach, dass, müssen Sie setup ein modales template wie dieses:

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

In der openModal Aktion, wir gingen in das Modell als gut. Dieser wird zugänglich, wenn wir reagieren auf das Ereignis. Müssen Sie Listener für das Ereignis und machen den modal in Ihre route ein, wie dieses:

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 die Aktion, wir setzen die modal-Eigenschaft für unseren controller, um das Modell, das wir übergeben, und wir setzen, dass der controller als controller für die modal. Das bedeutet, dass wir Zugriff auf die Modell-Eigenschaften in der Vorlage als normal. Ich habe auch die closeModal Ereignis, das durch trennen von der Steckdose.

Schließlich übernehmen wir den pendingAction Ereignis in Ihrem controller. Im modal, passierten wir das Modell zusammen mit der Aktion, so ist es hier zugänglich als gut.

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

Ich ein bisschen damit, auf einige Ihrer Vorlage, route und controller-Namen, so dass Sie müssen möglicherweise geändert werden, um Ihre situation anpassen. Wenn hier etwas nicht funktioniert, lassen Sie mich wissen, und ich kann ändern Sie die Antwort.

Finden Sie Anweisungen und ein Beispiel, wie Sie einen modalen Dialog hier in der Ember Kochbuch.

InformationsquelleAutor NicholasJohn16