What is the difference between raw.hbs handlerbar files and only .hbs handlerbar files?

مطور
1

I noticied that few plugin outlet like topic-list-after-title require raw.hbs file
while other require only hbs file.

I did search in the handlebars documentation, but I could see anything as raw hbs file.

I checked in the discourse code, plugin outlet like topic-list-after-title are defined as

{{raw-plugin-outlet name="topic-list-after-title"}}

while other plugins are defined as

{{plugin-outlet name="composer-fields-below" args=(hash model=model)}}

Q1. Is there any reason why some plugin plugin are defined in above way ( raw-plugin-outlet) ?

Also I noticied that in the raw.hbs file, the setupcomponent is not called as explained in this link

Q2. Is it so? I had also asked similar question regarding this.

إعجابَين (2)
2

I would be interested in this as well. Did you find the answer yet? :grinning:

3

Raw templates are a performance optimisation. Only partial ember view features exists, removal of features is what makes it faster.

Hence we use a different pattern here for extensibility. We don’t have the full ember lifecycle.

3 إعجابات
4

Is there something similar to setupComponent(args, component) with the raw outlets as well? What about computed properties? I would like to do some computations based on the data in context. How can I go about this? I dont even know if I named my accompanying .js.es6 file right. Should I name it .raw.js.es6?

SetUpComponent not being called for topic list tags plugin outlet - #3 by net_deamon
Okay I found the solution: reopen the Topic model and create a computed property there:

https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/initializers/event-edits.js.es6#L74
Afterwards it can be used int the raw template:
https://github.com/paviliondev/discourse-events/blob/master/assets/javascripts/discourse/connectors/topic-list-after-title/topic-list-event-rsvp.raw.hbs#L5

إعجاب واحد (1)
5

لدي نفس السؤال.

هل من الممكن “توفير” قالب خام مع جافا سكريبت مقابلة كما في المكونات العادية، ضمن مكون سمة (Theme Component)؟

لدي حالة استخدام صعبة للغاية وأحتاج إلى إدارة الإجراءات لنقل الحجج مرة أخرى إلى أعلى سلسلة المكونات من قالب مدمج بعمق ضمن قائمة المواضيع.

لاحظت وجود عدة ملفات .hbr مع عناصر مكون جافا سكريبت مقابلة بشكل واضح في مصدر Discourse، لكنني لاحظت شيئًا غريبًا، على سبيل المثال:

merefield@development:~/discourse$ find . -type f -name "flat-button.*"
./app/assets/javascripts/discourse/app/templates/flat-button.hbr
./app/assets/javascripts/discourse/app/templates/components/flat-button.hbs
./app/assets/javascripts/discourse/app/components/flat-button.js
merefield@development:~/discourse$ find . -type f -name "topic-list-item.*"
./app/assets/javascripts/discourse/app/templates/mobile/list/topic-list-item.hbr
./app/assets/javascripts/discourse/app/templates/components/topic-list-item.hbs
./app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
./app/assets/javascripts/discourse/app/components/topic-list-item.js
merefield@development:~/discourse$ find . -type f -name "topic-post-badges.*"
./app/assets/javascripts/discourse/app/templates/components/topic-post-badges.hbs
./app/assets/javascripts/discourse/app/templates/topic-post-badges.hbr
./app/assets/javascripts/discourse/app/components/topic-post-badges.js

يبدو إذن أن هناك عدة حالات يكون فيها هناك نسختان من مكون معين، إحداهما بصيغة .hbr والأخرى بصيغة .hbs؟

6

آه، على الأقل مع topic-list-item أرى أن التبديل يتم هنا:

محتويات ملف hbs:

{{topicListItemContents}}

جافا سكريبت الداعم:

  @observes("topic.pinned")
  renderTopicListItem() {
    const template = findRawTemplate("list/topic-list-item");
    if (template) {
      this.set(
        "topicListItemContents",
        template(this, RUNTIME_OPTIONS).htmlSafe()
      );
      schedule("afterRender", () => {
        if (this.selected && this.selected.includes(this.topic)) {
          this.element.querySelector("input.bulk-select").checked = true;
        }
      });
    }
  },

ماكرة!

إذن هذا يوحي بأن ملفات hbr لا تحتوي على ملفات جافا سكريكت أساسية، ما لم تدعمها مثل هذه الحيلة؟

إعجاب واحد (1)
7

نعم، أعتقد أن هذا هو الحال. إذا كانت هناك طريقة أخرى، فلم أرَها حتى الآن!

إعجاب واحد (1)
8

هذا المراقب ليس مثاليًا، حيث نسعى للتخلص منه مع استمرارنا في ترقية Ember. أعتقد أن الطريقة الأفضل هي إنشاء دالة مساعدة (helper) ووضع كود JavaScript الخاص بك فيها. إليك مثالًا:

https://github.com/discourse/discourse-category-experts/blob/main/assets/javascripts/discourse/connectors/topic-list-after-title/category-experts-indicator.hbr

إعجابَين (2)
9

في بعض الأعمال الأخيرة، احتجت إلى أن تكون بعض “شجرة” القوالب قادرة على نقل البيانات من قالب ورقة باستخدام إجراءات الإغلاق، لذا قمت بتحويل بعض ملفات hbr إلى hbs لدعم ذلك.

هذا العمل تجريبي وأقدر أن له تأثيرًا على الأداء، لكن بعد تكرار التصميم عدة مرات لم أستطع إيجاد طريقة بديلة للقيام بذلك مع البقاء “داخل الإطار”.

10

ألا يمكنك تمرير دوال إلى دالة مساعدة واستدعاؤها هناك؟ لا أعتقد أنني جربت هذا، لكنني أتخيل أنه يمكنك فعل ذلك.

إعجاب واحد (1)
11

على وجه التحديد، أقوم بتحديد خصائص صورة في مكون ورقة، ثم تخزينها كخصائص للجد الأكبر للتأثير على التنسيقات التي يجب أن تستمر بعد عملية عرض القائمة الحالية. يجب بالتأكيد نقل البيانات إلى الأعلى. إذا كان بإمكان دالة مساعدة تحقيق ذلك، فذلك يبدو خيارًا جيدًا إذا واجهت صعوبة مع النهج الحالي، شكرًا لك!

إعجاب واحد (1)