Question

我使用带有引导程序的ember js 我有一个使用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>

现在当有人点击表格行时，我正在显示用于确认的bootstrap模式

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

我希望这些点击的行详细信息在ember中，以便我可以在服务器上处理它

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

任何人都可以告诉我如何在ember中获取点击的行详细信息

Answer 1

有两个问题需要解决，在事件上传递选定的对象/模型（例如，当点击批准按钮时）能够使用复杂的模板作为模态的内容（例如，当点击一行时modal可以包含来自master-detail（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

您可以在

上指定操作

tr

像这样：

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

现在，当点击一行时，操作中的控制器方法哈希＆＃39; pendingAction＆＃39;使用参数触发，该参数是单击的行，或者更准确地说，是已实现到行中的对象。

Answer 3

为了使其正常工作，您将不得不改变触发模态的方式。而不是使用Bootstrap插件，使用Ember处理它会好得多。

在您的application模板中，为您的模态添加第二个名为outlet的内容：

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

然后在你的模板中添加一个新的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>

之后，您需要设置这样的模态模板：

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

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

在动作中，我们将控制器的模态属性设置为我们传入的模型，我们将该控制器设置为模态的控制器。这意味着我们可以正常访问模板中的模型属性。我还通过断开插座添加了closeModal事件。

最后，我们可以在您的控制器中处理pendingAction事件。在模态中，我们将模型与动作一起传递，因此也可以在此处访问。

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

我猜测了一些模板，路线和控制器名称，因此可能需要根据您的情况进行更改。如果这里的某些东西不起作用，请告诉我，我可以修改答案。

您可以找到有关如何设置模式对话的说明和工作示例here in the Ember Cookbook。

如何在单击bootstrap模式时获取引导表行值

3 个答案: