在ember中检索表内容数据

jrcvhitl  于 2022-09-28  发布在  其他
关注(0)|答案(1)|浏览(166)

我正在创建一个ember应用程序,它从servlet获取数据并以表格格式打印它。表格如下所示

Capacity Price  RoomType    RoomNo  Action
6        4150   suite         93    Select
2        1579   villa          5    Select
1        1526   villa          1    Select

当我单击“选择”时,我需要获取房间号中的值。我尝试创建一个跟踪变量并更新该值,但被卡住了,所以如果我知道如何在ember中完成它,我将不胜感激。我发现有一篇文章使用jQuery做同样的事情,但我不知道如何将jQuery添加到ember应用程序中。
Myy车把文件

{{#if this.request.isPending}}
  loading data...
{{/if}}
<main class="conttainer mt-5 ">

<container class="cond">
<table border="1|0" class = "tab">
  <thead>
    <tr>
      <th><td>Capacity</td></th>
      <th><td>Price</td></th>
      <th><td>RoomType</td></th>
      <th><td>RoomNo</td></th>
      <th><td>Action</td></th>
    </tr>
  </thead>
  <tbody>

    {{#each this.result as |row|}}    
      <tr>
        {{#each-in row as |key value|}}
          <td>{{value}}</td>

        {{/each-in}}
        <td><button  class = "btn-test" {{on "click" (this.getroomno) {{value}}>Select</button></td>//--> wrong decleration yet i dont know how to access the roomno column

      </tr>
    {{/each}}
  </tbody>
</table>
</container>
<form>
  <table>
    <tr>
      <td><h5>room number</h5></td>
    </tr>
    <tr><td>{{this.room}}</td></tr>//---> i have to show the value here
    <tr><td><b>Enter the Start Date</b></td></tr>
    <tr><td><input type = "date" placeholder="yyyy-mm-dd" id = "sdate" value = "2022-07-01" min = "2022-07-01" max = "2022-07-31"></td></tr>
    <tr><td><b>Enter the End Date</b></td></tr>
    <tr><td><input type = "date" placeholder="yyyy-mm-dd" id = "edate" value = "2022-07-01" min = "2022-07-01" max = "2022-07-31"></td></tr>
    <tr><td><button type = "button" {{action "get"}}>submit</button></td></tr>
  </table>
</form>

</main>

我的控制器文件

class RequestState {
  @tracked value;
  @tracked error;

  get isPending() {
    return !this.error && !this.value;
  }
}

export default class RoomselectController extends Controller {
  @service router;
  @tracked room =0;
  getroomno(value){
    var that = this;
    console.log(value);
    that.room = value;
    console.log(that.room)
  }

  @use request = resource(({ on }) => {
    const state = new RequestState();
    var dis = this;
    $.ajax({
      url: 'http://localhost:8080/hotelres/My',
      method: 'GET',
      dataType: 'json',
      success: function(response){ 
        console.log(response)
        if(response == 0){
          dis.transitionToRoute("error");
        }else{
          state.value = response
        }
      },
      error: (xhr, status, error) =>
        (state.error = `${status}: ${xhr.statusText}`),
    });

    return state;
  });

  get result() {
    return this.request.value || [];
  }

当按下选择按钮时,我需要呈现房间号。

dvtswwa3

dvtswwa31#

在你那一排,我看到了:

<td><button class="btn-test" {{on "click" (this.getroomno) {{value}}>Select</button></td>

这将在将“处理程序”传递给点击事件侦听器之前调用this.getroomno。(然后{{value}}应该是语法错误?因为有两个打开的{{和一个关闭的e1d 3d1e
有关此语法的详细信息,请参见:this cheatsheet
认为你想要的是:

<td>
  <button 
    class="btn-test" 
    {{on "click" (fn this.getroomno row)>
    Select
  </button>
</td>

fn上的文档在这里
fn部分地将row应用于getroomno,因此当调用时,getroomno将被传递给该行,单击事件将是最后一个参数(如果需要)

相关问题