如何从ember.js中的hbs文件调用js函数

axzmvihb  于 2022-11-05  发布在  其他
关注(0)|答案(2)|浏览(223)

这是ember.js中的主要应用程序
应用程序/模板/应用程序.hbs

{{page-title "User Management"}}
<ul>
  <LinkTo @route="print-user" >Print User</LinkTo>
</ul>
{{outlet}}

这是用于从servlet获取json-array响应的代码
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);
    }
}

这是在网页中打印用户表的hbs代码。
应用程序/组件/打印-用户.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}}

我需要在单击应用程序中的打印用户时打印用户数据。hbs当我单击搜索按钮时,它工作正常。我不知道如何在不单击按钮的情况下打印用户详细信息...

q9yhzks0

q9yhzks01#

您可以从constructor手动调用searchuser操作:

constructor() {
  super(...arguments);
  this.searchuser('default search value');
}
q5iwbnjs

q5iwbnjs2#

显然,你想在组件上调用searchuser动作,而不需要点击组件上的按钮,也就是说,当组件显示时,使用did-insert修饰符。
通常都是这样的:你可以把修饰符放在组件的标签上。在你的例子中,<input5>searchbutton就可以了。

<input5 {{did-insert this.searchuser}}>
  {{input type="text" value=search placeholder="Enter Text"}}
</input5>

etc...

相关问题