كيفية الحصول على "string === string" في القالب؟

مطور
1

في إضافةي، أريد أن يكون لدي عبارة if في قالب، تقوم بتقييم ما إذا كانت السلسلة تتطابق مع قيمة معينة.

مثل هذا:

{{#each groups as |group|}}
  {{#if group.name === "AwesomeName"}}
      <div>هناك تطابق!</div>
  {{/if}}
{{/each}}

كيف يمكنني القيام بذلك في Discourse؟

أفهم أن استخدام {{if}} مباشرة لا يعمل في Ember/Handlebars. يبدو أنني بحاجة إلى تسجيل دالة مساعدة (helper). شيء مثل هذا:

plugin/assets/javascripts/discourse/helpers/eq/js/es6

import { registerHelper } from 'discourse-common/lib/helpers';

registerHelper('eq', function(arg1, arg2) {
     if (arg1 === arg2) {
         return true
    } else {
       return false
    }
})

plugin/assets/javascripts/templates/components/my-component.hbs

{#each groups as |group|}}
  {{#eq group.name "AwesomeName"}}
      <div>هناك تطابق!</div>
 {{/eq}}
{{/each}}

هذا لا يعمل. (لا توجد أخطاء معروضة.)

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

أريد فقط أن أتمكن من كتابة عبارة if لمطابقة سلسلة بقيمة معينة. كيف أفعل ذلك؟

2

تريد استخدام Computed Properties - The Object Model - Ember Guides

لكن راجع كود مصدر Discourse لمعرفة أسلوب الترميز المحدد الخاص بهم.

3

الخصائص المحسوبة مثيرة للاهتمام، لكنني لا أرى الرابط بما أركز عليه هنا.

في مثالِي، الخاصية الرئيسية هي group.name، وأريد تقييم ما إذا كانت هذه الخاصية تطابق “AwesomeName” في القالب. لست متأكدًا من كيفية مساعدة الخصائص المحسوبة في تجاوز الحاجة إلى استخدام نوع معين من عبارة {{if}} في القالب، والتي لم أستطع حتى الآن معرفة كيفية عملها.

4

تتضمن قوالب Handlebars منطقًا بوليانيًا بدائيًا فقط. يمكنك إجراء عمليات تحقق من القيم الحقيقية (truthy values) للخاصية.

لتنفيذ أي منطق أكثر تعقيدًا، يجب عليك تنفيذ المنطق في ملف Ember JS المرتبط بالقالب.

على سبيل المثال، إذا كان لديك قالب في templates/components/my-component.hbs، فيجب عليك استخدام ملف JS components/my-component.js لإجراء الحساب.

في هذا الملف، يمكنك فعل شيء مثل التالي:

import discourseComputed from "discourse-common/utils/decorators";
import Component from "@ember/component";

export default Component.extend({
  @discourseComputed("string1", "string2")
  property(string1, string2) {
    return string1 === string2;
  }
});

property هو مجرد اسم لدالة، ولكن يمكن أن يكون أي اسم آخر.

ثم في القالب، يمكنك فعل شيء مثل التالي:

{{#if property}}
 blah blah...
{{/if}}

هذا يجلب الخاصية المحسوبة من ملف JS ويعرض المحتوى داخل كتلة #if فقط إذا كانت property تُرجع true.

5

شكرًا لك على هذا—لقد ساعد في توضيح الكثير.

لم أتمكن بعد من جعل الأمر يعمل بالكامل، وذلك جزئيًا لأنني لا أجد أمثلة متاحة لاستخدام الخصائص المحسوبة (computed properties) للقيام بهذا النوع من العمليات.

في حالتي، داخل إضافة (plugin) الخاصة بي، أقوم بإجراء التعديل في قالب فهرس المجموعات (group index template). أي في الملف: plugin/assets/javascripts/discourse/groups/index.hbs (لقد وضعت كود فهرس المجموعات بالكامل هناك وأضفت التعديلات فوقه.)

هل تقصد أن ملف JS الخاص بالخاصية المحسوبة سيوضع في ملف أقوم بإنشائه وهو: plugin/assets/javascripts/discourse/groups/index.js؟ أم يمكنني ببساطة وضع هذا الكود في مُهيئ (initializer)؟

هذا هو أفضل ما استطعت فعله لتطبيق ما تتحدث عنه—هل هذا ما كان في ذهنك:

js:

export default Component.extend({
  @discourseComputed("group.name", "Amazing_Name")
  property(group.name, Amazing_Name) {
    return group.name === Amazing_Name
  }
})

hbs:

 {{#if property}}
    <div>نعم، هناك تطابق!</div>
 {{/if}}

أم أنك تقصد أنه يجب علي إدخال قيم عامة حرفيًا مثل “string1” و “string2” في @discourseComputed، ثم تغيير القالب إلى {{#if property group.name "Amazing_Name"}}؟ (فقط بهذه الطريقة يمكنني التعامل مع كل قيمة ديناميكية في القالب.)

لم أتمكن بعد من جعل أي من الطريقتين تعمل بشكل كامل.

شكرًا لك على مساعدتك.

6

هل تمكنت من جعلها تعمل؟ أشعر برغبة شديدة في الحصول على مثال مفصل حول كيفية القيام بذلك (ما المحتوى الذي يجب إضافته، وفي أي ملف، وأين في ذلك الملف إذا كان ذلك ذا صلة).

7

في الواقع، لم أتمكن أبدًا من جعل هذا يعمل بنفسي واضطررت إلى المضي قدمًا. بدا الأمر سخيفًا قضاء وقت طويل في ما يعتبر عادةً تمرين برمجي أساسي. في حالتي، أعتقد أنه كان على الأرجح بعض الأخطاء في بناء الجملة هنا وهناك، لكنني لم أجد أمثلة كاملة تعمل. سأكون ممتنًا أيضًا للحصول على مثال كامل يعمل يوضح كيفية تنفيذ if string === string.