토픽 ID를 변수로 사용할 수 있나요?

개발
24

@tknospdr @pfaffman 주제 ID를 입력하고 해당 주제로 바로 이동할 수 있도록 하는 간단한 컴포넌트를 만들어 보았습니다.

새로운 컴포넌트를 만들고, CSS/HTML 편집 버튼 아래 있는 JS 탭에 아래 내용을 추가하세요.[1]:

import { apiInitializer } from "discourse/lib/api";
import Component from '@glimmer/component';
import { action } from "@ember/object";
import Form from "discourse/components/form";
import DiscourseURL from "discourse/lib/url";

export default apiInitializer((api) => {
    api.renderBeforeWrapperOutlet("full-page-search-filters", 
        class GoToTopic extends Component {
            @action
            handleSubmit(data) {
                DiscourseURL.routeTo(`/t/${data.id}`);
            }
            
            <template>
                <div class="topic-id-go-to" style="margin-top: 1em;">
                    <Form @onSubmit={{this.handleSubmit}} as |form|>
                    
                      <form.Field @name="id" @title="Topic id" as |field|>
                        <field.Input @type="number" @validation="required" />
                      </form.Field>
                    
                      <form.Submit />
                    </Form>
                </div>
            </template>
        }
    );
});

이렇게 하면 검색 페이지에 입력란이 추가됩니다:

image
image1483×424 14.6 KB

제출 버튼은 해당 주제로 이동하는 용도입니다.[2] 검색 결과에는 영향을 주지 않습니다.

도움이 되셨으면 좋겠습니다!

  1. FormKit을 처음 사용해 보는데, 정말 멋진 도구입니다! ↩︎

  2. 버튼 텍스트를 변경할 수 없었습니다. 그렇게 하려면 로케일이 필요하고, 그건 TC 저장소 전체가 필요할 수 있으니 과할 수 있거든요. :person_shrugging: ↩︎