我正在创建一个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 || [];
}
当按下选择按钮时,我需要呈现房间号。
1条答案
按热度按时间dvtswwa31#
在你那一排,我看到了:
这将在将“处理程序”传递给点击事件侦听器之前调用
this.getroomno
。(然后{{value}}
应该是语法错误?因为有两个打开的{{
和一个关闭的e1d 3d1e有关此语法的详细信息,请参见:this cheatsheet
我认为你想要的是:
fn
上的文档在这里fn部分地将
row
应用于getroomno
,因此当调用时,getroomno
将被传递给该行,单击事件将是最后一个参数(如果需要)