커넥터에서 변수에 액세스하기

시스템 관리에는 꽤 능숙합니다. Rails로 무언가를 하는 것도 나쁘지 않습니다. 하지만 JavaScript, Ember, CSS는 제게 원시인 수준입니다.

PM(개인 메시지)을 보낼 수 있는 사용자를 변경하는 플러그인에서, 사용자가 PM을 보낼 권한이 없는 경우 프로필 페이지에 버튼을 추가하려고 하고 있습니다. assets/javascripts/discourse/templates/connectors/user-summary-stat/my-clever-name.hbs 파일에 코드를 넣으면 원하는 위치에 텍스트를 추가할 수 있습니다. (정말 기뻤습니다!)

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/user/messages.hbs#L3 파일에서 다음 코드가 사용되고 있는 것을 확인했습니다.

    {{#if showNewPM}}

my-clever-name.hbs 파일에서 이 변수를 사용해보고 싶은데, 해당 변수가 정의되어 있지 않습니다.

아마도 my-clever-name.hbs 파일과 같은 디렉토리에 my-clever-name.js.es6 파일을 만들고 . . . 무언가를 포함하거나, 해당 변수를 정의하는 코드를 추가해서 변수에 접근할 수 있도록 해야 하는 것 같습니다. 하지만 개발자 가이드를 몇 번 다시 읽어보고, 같은 일을 하는 것처럼 보이는 다른 플러그인들의 코드를 참고해봐도 정확히 어떻게 해야 하는지 모르겠습니다.

제이님, 안녕하세요.

EmberJS를 "그 자체로 하나의 언어"라고 말하는 사람들을 봤습니다!

필요한 것은 Computed Property(계산 속성)입니다:

Discourse 소스의 문법과 import가 조금 다르긴 하지만, 예제를 찾아보는 것이 가장 좋습니다. 제 코드 일부입니다:

https://github.com/paviliondev/discourse-zspace/blob/cc8893c14a9b1c5d4f6552f8f6b12ea9ac7ac643/assets/javascripts/discourse/components/activity-file-edit.js.es6#L10

즉, @discourseComputied("uploading")를 사용하면 uploading을 hbs 템플릿에서 사용할 수 있다는 뜻인가요? Ember에서 다음과 같은 경우처럼요:


fullName: computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  })

그럼 assets/javascripts/discourse/components/my-plugin.js.es6 파일을 만들고 . . . 무언가를 . . . 확장하면 되는 건가요? 내가 확장하려는 다른 템플릿에서 접근할 수 있는 동일한 변수들을 그냥 "활성화"할 수 있는 방법이 있을 것 같은데. 아! 내 컴포넌트에서 그것을 확장하면 그 변수들이 나에게도 사용 가능해질까요?

일단 포기하고 한 걸음 물러서서 Ember 튜토리얼에 일주일 정도 투자하는 게 나을까요?

즉, 이는 ‘firstName’ 또는 'lastName’이 변경될 때마다 업데이트되는 'fullName’이라는 계산 속성을 설정하는 것입니다. 반환된 값이 해당 속성의 값이 됩니다.

인내심을 가져주셔서 감사합니다!

그 부분은 이해한 것 같은데, 템플릿에서 접근할 수 있는 값을 어떻게 만들 수 있는지는 이해가 안 됩니다.

assets/javascript/discourse/components/user-private-messages.js.es6:

import discourseComputed from "discourse-common/utils/decorators";
import User from "discourse/controllers/user";

export default Ember.Component.extend(User, {
    classNames: ["restrict-pms"],
    myFunThing: "this is text in my fun thing",
    @discourseComputed("myvalue")
    someThing(myvalue) {
        return true;
    }
});

Template.registerHelper("log", function(something){
    console.log(something);
});

제가 묻고 있는 것(이해가 안 될 수도 있지만)은 assets/javascripts/discoures/templates/connectors/user-profile-controls/add-link-to-subscription.hbs 파일에 무엇을 넣어야 myFunThing이나 myvalue에 접근할 수 있는지에 대한 것입니다.

컴포넌트 js에 해당하는 템플릿은 이중 중괄호 안에 계산된 속성을 포함시켜 간단히 참조할 수 있습니다:

{{fullName}}

위 코드는 assets/javascript/discourse/components/user-private-messages.js.es6 파일에 있습니다.

assets/javascripts/discourse/templates/connectors/user-profile-controls/add-link-to-subscription.hbs 파일에서 {{myFunThing}} 또는 {{myvalue}}를 사용하고 싶은데, 정의되지 않은 상태입니다.

해당 파일 중 하나가 잘못된 위치에 있거나(위의 hbs 파일의 다른 텍스트는 /u/username/summary에서 myFunThing 없이 렌더링되는 것을 볼 수 있습니다), 잘못된 클래스를 가져오거나 잘못된 컴포넌트를 확장하고 있다고 생각합니다.

죄송합니다, 제이. 지금은 좀 바쁘지만, 할 수 있는 일은 단순히 hbs 파일 내에서 커넥터 hbs에 컴포넌트를 연결하는 것입니다. 예를 들어:

{{my-component}}

(필요한 경우 인수를 추가하세요)

이렇게 하면 templates/components와 /components에서 my-component.hbs를 찾아갑니다.

대안으로, 커넥터 디렉터리 내의 js 파일에서 프로퍼티를 설정할 수도 있지만, 제 스타일로는 전자의 접근 방식을 선호합니다.

이게 1년 전 글이라는 건 알지만, @pfaffman 님, 결국 해결하셨나요?

이것이 같은 (미완성된) 프로젝트 때문은 아니기를 바랍니다. 하지만 여기 있습니다:

https://github.com/pfaffman/discourse-pfaffmanager/blob/master/assets/javascripts/discourse/templates/pfaffmanager-servers-show.hbs

이것은 다음을 호출합니다:

https://github.com/pfaffman/discourse-pfaffmanager/blob/master/assets/javascripts/discourse/templates/components/server-item.hbs

그리고, 저는 이것이 다음을 호출한다고 생각합니다:

https://github.com/pfaffman/discourse-pfaffmanager/blob/master/assets/javascripts/discourse/controllers/pfaffmanager-servers-show-item.js.es6