如何从 ember.js 中的 hbs 文件调用 js 函数
How to call js function from a hbs file in ember.js
这是ember.js
中的主要应用
app/templates/application.hbs
{{page-title "User Management"}}
<ul>
<LinkTo @route="print-user" >Print User</LinkTo>
</ul>
{{outlet}}
这是从 servlet
获取 json 数组响应的代码
app/components/print-user.js
import Component from '@glimmer/component';
import {action} from "@ember/object";
import {tracked} from "@glimmer/tracking";
export default class PrintUserComponent extends Component {
@tracked search="";
@tracked print="";
@tracked gotresponse=false;
@action
async searchuser (searchtext){
let response=await fetch("/UserManagement/SearchServlet",
{ method: "POST",
body: JSON.stringify({
"type": "search",
"searchtext": searchtext
})
});
let parsed=await response.json();
this.gotresponse=true;
this.search=parsed;
}
async deleteuser (id,firstname,lastname,mailid){
let response=await fetch("/UserManagement/UserManagementServlet",
{ method: "POST",
body: JSON.stringify({
"type": "delete",
"id": id,
"firstname":firstname,
"lastname":lastname,
"mailid":mailid
})
});
let parsed=await response.json();
alert(parsed.status);
}
}
这是在网页中打印用户table的hbs代码
app/components/print-user.hbs
<input5>{{input type="text" value=search placeholder="Enter Text"}}</input5>
<searchbutton {{on "click" (fn this.searchuser search )}}>Search</searchbutton>
<table class="styled-table">
<thead>
<tr><th>User Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Mailid</th>
<th>Delete</th>
</tr>
</thead>
{{#each this.search.Users_data as |user|}}
<tbody>
<tr>
<td>{{user.id}}</td>
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.mailid}}</td>
<td><button {{on "click" (fn deleteuser user.id user.firstname user.lastname user.mailid )}}>Delete</button></td>
</tr>
</tbody>
{{/each}}
</table>
{{yield}}
我需要在点击 application.hbs 中的打印用户时打印用户数据
单击搜索按钮时它工作正常。
我不知道如何在不单击按钮的情况下打印用户详细信息....
显然您想在组件上调用 searchuser
操作而不需要单击组件上的按钮,即当组件显示时。为此使用 did-insert
修饰符。
通常情况是这样的:将修饰符放在组件中的标记上。在你的情况下 <input5>
或 searchbutton
就可以了。
<input5 {{did-insert this.searchuser}}>
{{input type="text" value=search placeholder="Enter Text"}}
</input5>
etc...
您可以从 constructor
:
中手动调用 searchuser
操作
constructor() {
super(...arguments);
this.searchuser('default search value');
}
这是ember.js
中的主要应用app/templates/application.hbs
{{page-title "User Management"}}
<ul>
<LinkTo @route="print-user" >Print User</LinkTo>
</ul>
{{outlet}}
这是从 servlet
获取 json 数组响应的代码app/components/print-user.js
import Component from '@glimmer/component';
import {action} from "@ember/object";
import {tracked} from "@glimmer/tracking";
export default class PrintUserComponent extends Component {
@tracked search="";
@tracked print="";
@tracked gotresponse=false;
@action
async searchuser (searchtext){
let response=await fetch("/UserManagement/SearchServlet",
{ method: "POST",
body: JSON.stringify({
"type": "search",
"searchtext": searchtext
})
});
let parsed=await response.json();
this.gotresponse=true;
this.search=parsed;
}
async deleteuser (id,firstname,lastname,mailid){
let response=await fetch("/UserManagement/UserManagementServlet",
{ method: "POST",
body: JSON.stringify({
"type": "delete",
"id": id,
"firstname":firstname,
"lastname":lastname,
"mailid":mailid
})
});
let parsed=await response.json();
alert(parsed.status);
}
}
这是在网页中打印用户table的hbs代码
app/components/print-user.hbs
<input5>{{input type="text" value=search placeholder="Enter Text"}}</input5>
<searchbutton {{on "click" (fn this.searchuser search )}}>Search</searchbutton>
<table class="styled-table">
<thead>
<tr><th>User Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Mailid</th>
<th>Delete</th>
</tr>
</thead>
{{#each this.search.Users_data as |user|}}
<tbody>
<tr>
<td>{{user.id}}</td>
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.mailid}}</td>
<td><button {{on "click" (fn deleteuser user.id user.firstname user.lastname user.mailid )}}>Delete</button></td>
</tr>
</tbody>
{{/each}}
</table>
{{yield}}
我需要在点击 application.hbs 中的打印用户时打印用户数据 单击搜索按钮时它工作正常。 我不知道如何在不单击按钮的情况下打印用户详细信息....
显然您想在组件上调用 searchuser
操作而不需要单击组件上的按钮,即当组件显示时。为此使用 did-insert
修饰符。
通常情况是这样的:将修饰符放在组件中的标记上。在你的情况下 <input5>
或 searchbutton
就可以了。
<input5 {{did-insert this.searchuser}}>
{{input type="text" value=search placeholder="Enter Text"}}
</input5>
etc...
您可以从 constructor
:
searchuser
操作
constructor() {
super(...arguments);
this.searchuser('default search value');
}