como obter o bootstrap tabela de valores de linha, clicando no bootstrap modal

Question

Iam usar ember js com bootstrap eu tenho uma tabela usando o 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>

agora, quando alguém clicar sobre a linha da tabela que eu estou mostrando bootstrap modal para confirmação

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

e eu quero que esses linha clicada detalhes na brasa para que eu possa processá-lo no servidor

App.ApprovalrequestsController = Ember.ObjectController.extend({
actions: {
pendingAction: function () {
 //here i want to get the details of clicked row 
    //this.transitionToRoute("approvalrequests", rdata);
}
}
});

alguém pode me dizer como chegar a linha clicada detalhes em brasa

Answer 1

Há dois problemas que precisam ser resolvidos, passando o objeto selecionado/modelo em um evento (por exemplo, ao clicar no botão aprovar) ser capaz de usar um complicado modelo de como conteúdo do modal (por exemplo, ao clicar em uma linha modal pode conter um formulário ou que dados de um mestre-detalhe(s) de relacionamento).

Uma abordagem seria para atualizar o conteúdo do modal cada vez que uma seleção em uma linha acontece.A seleção pode ser tratado quando clicar na linha e a atualização do (possivelmente rica/complicado) o conteúdo do modal poderia ser conseguido através da atribuição de um modelo para ele e obrigatória a apresentação de uma propriedade.

O exemplo a seguir, por simplicidade, foi usado um partial modelo para segurar o modal de conteúdo e objetos simples com uma propriedade (name) como modelo.

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

Answer 2

Você pode especificar a ação sobre os

tr

como esta:

 <tr id="ptable" data-toggle="modal" {{action 'pendingAction' this}} //blah>

Agora, quando uma linha é clicado, o controlador do método nas ações de hash 'pendingAction' é disparado com um parâmetro, que é a linha que foi clicado, ou, mais precisamente, o objeto que se tem materializado na linha.

Answer 3

Para chegar a este funcionar corretamente, você vai ter que alterar a forma como você acionar o modal.Em vez de usar o Bootstrap do plugin, é muito melhor usar o Ember para lidar com isso.

Em seu application o modelo, adicionar uma segunda chamada outlet para o seu modal:

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

Em seguida, no seu modelo, adicionar um novo action que irá acionar a abertura do modal e passar o modelo, junto com ela, como este:

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

Depois disso, você precisará instalar um modal modelo como esse:

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

No openModal ação, passamos no modelo de bem.Isto irá torná-lo acessível quando reagimos a para o evento.Você precisa ouvir para o evento e processar o modal no seu percurso, como este:

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

Na ação, estamos definindo a propriedade modal para o nosso controlador para o modelo que passou e estamos a definição de que o controlador o controlador para o modal.Isto significa que podemos acessar as propriedades do modelo no modelo normal.Eu também adicionei o closeModal evento que funciona desconectando-o da tomada.

Finalmente, podemos lidar com o pendingAction evento no seu controlador.No modal, passamos o modelo junto com a ação, portanto, é acessível aqui.

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

Eu meio que adivinhou em alguns de seu modelo, a rota e o controlador de nomes para que eles podem precisar de ser alterada para se ajustar à sua situação.Se algo não funcionar, deixe-me saber e eu posso modificar a resposta.

Você pode encontrar instruções e um exemplo de como configurar um diálogo modal aqui na Brasa Livro de receitas.