을 얻는 방법 스트랩 표 행 값을 클릭하면 스트랩달

Question

Iam 를 사용하는 엠버 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>

지금 클릭할 때에 행 테이블을 보여주는 스트랩이 모달에 대한 확인

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

나는 원하는 이들을 클릭 행정에서 엠버할 수 있도록 프로세스에 그것을 서버

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

는 방법을 말해 줄 수를 얻을 클릭한 행정에서 엠버

Answer 1

거기에는 두 가지 문제 해결해야 하는,전달하는 선택된 객체/는 모델에는 이벤트가(예를 들어 클릭하면 승인하는 버튼)을 사용할 수 있는 복잡한 템플릿을 컨텐츠의 모달(예를 들어 클릭하면서 행하는 모달을 포함할 수 있는 형태 또는 데이터에서 마스터 세부 사항(s)관계).

방법 중 하나 것 콘텐츠를 새로의 모달의 모든 시간에서 선택 행 발생합니다.선택 처리할 수 있을 때 클릭하여 행하고 새로 고침(가능하게 풍부/복잡한)컨텐츠의 모달 될 수 있을 달성을 할당하여 템플릿을 바인딩 및 그것의 렌더링을 제공합니다.

다음 예제는 단순함을 위해 사용 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">&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

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.

Answer 3

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.

In your application template, add a second named outlet for your modal:

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

Then in your template, add a new action that will trigger the opening of the modal and pass the model along with it, like this:

<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">&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 the openModal action, 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:

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 closeModal event that works by disconnecting the outlet.

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.

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.