Ember.js: التقديم <button>في كل حلقة فواصل التطبيق</button>

نعم ، تم التأكيد ، لقد واجهنا نفس الخطأ بعد الترقية من 3.2.2 إلى 3.3.0

أنا مندهش إلى حد ما من أن هذا كسر في 3.3 ، لكنني كنت أتوقع كسره في 3.4 (بسبب ميزة استدعاء قوس الزاوية).

سأحاول البحث لتأكيد ما إذا كان مرتبطًا ...

التغيير إلى:

{{#each buttons as |text|}}
  <button>{{text}}</button>
{{/each}}

يجب حل المشكلة (بافتراض أن ميزة تخميني RE: ميزة استدعاء قوس الزاوية صحيحة).

rwjblue نعم ، التغيير من button إلى text أو btn للمساعدة. شكرا لك على التوضيحات.

مجرد رسالة إعلامية: واجهت نفس المشكلة مع {{#each model as | img |}}. يؤدي تغيير img إلى ie "foto" إلى حل هذا الخطأ. هل تم توثيق هذا التغيير الفاصل (المصدر - 3.2.2 => 3.3.0) في مكان ما؟

مجرد معلومة أخرى: هذه المشكلة تخدعني كثيرًا ، والمفتاح هو: لا تستخدم اسم علامة html باعتباره الجزء as من each أي مساعد ينتج شيئًا ما.

{{#each people as |p|}} {{!-- don't, because `p` is a html tag name --}}
  {{p.name}}
{{/each}}

{{#each people as |person|}} {{!-- this is fine --}}
  {{person.name}}
{{/each}}

لست متأكدًا مما إذا كان سيكون تغييرًا مفاجئًا ، لكنني آمل ألا يحدث ذلك.

nightire كما أستطيع أن أقول ، يمكننا استخدام اسم علامة html في جزء as إذا لم يتم استخدام علامة html داخل الكتلة. أعتقد أيضًا أنه لا يؤثر فقط على each ولكن على أي مساعد كتلة ينتج شيئًا ما ، بما في ذلك المكونات الخاصة بنا.

تأكد من أن الحصول على أي معلمة كتلة سيتم استخدامها كاستدعاء قوس زاوية سيؤدي إلى حدوث هذه المشكلة.

راجع المشكلات التالية للحصول على مزيد من المعلومات الأساسية:

• https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/17
• https://github.com/ember-template-lint/ember-template-lint/issues/441

لا ينبغي أن يحدث هذا التغيير خلال 3.3 ، وسنحاول معرفة سبب حدوثه (وإصلاحه). ومع ذلك ، فإننا _do_ نعتزم الهبوط كجزء من 3.4 (جنبًا إلى جنب مع دعم الفحص في التطبيقات كدليل عام).

هل يجب أن نتوقع أن يتم تصحيح هذا في 3.3.1؟

ربما ، ولكن لا يزال من الجيد إعادة البناء بعيدًا عن الأنماط التي تتعطل حاليًا.

تعتبر قاعدة ember-template-lint no-shadowed-elements طريقة رائعة لفرض ذلك.

لقد بدأت أيضًا في الحصول على خطأ: لا يمكن الوصول إلى هذه الوظيفة الإضافية في 3.3 ...

https://github.com/tedconf/ember-collapsible-panel/issues

هل هذا يعتبر تغيير جذري؟ أنا أيضًا مرتبك قليلاً من قبل RFC حول ما إذا كان هذا مسموحًا به (ومن المفترض أن يعمل) ، أو مسموحًا به في وقت الإنشاء (ولكن يتوقف في وقت التشغيل).

هل هذا يعتبر تغيير جذري؟

نعم ، إنه تغيير جذري ونحن نعمل على الإصلاح.

أنا أيضًا مرتبك قليلاً من قبل RFC حول ما إذا كان هذا مسموحًا به (ومن المفترض أن يعمل) ، أو مسموحًا به في وقت الإنشاء (ولكن يتوقف في وقت التشغيل).

يتطابق السلوك الحالي مع ما ذكره RFC (بشكل أساسي أن معلمة الكتلة المسماة button + <button></button> في قالب الكتل ، ستفترض أن معلمة الكتلة كانت مكون إغلاق محقق ومحاولة عرضها على أنها مثل) ، ولكن بناءً على التعليقات (هنا وفي قضايا أخرى) قررنا أن النتيجة هي بالتأكيد شيء نعتبره تغييرًا مفاجئًا.

الخطة الحالية (بعد مناقشتها مع الفريق الأساسي في 2018-07-20) هي:

• تأكد من أن جميع معلمات الكتلة التي "ظل" لعناصر HTML العادية داخل كتلها ، تستمر في عرض عنصر HTML (ولا تفترض أنها يجب أن "تستدعي" مكونًا ناتجًا).
• قم بإيقاف العمل عند اكتشاف هذا السيناريو (مع until: '4.0.0' )
• تأكد من إعداد linter لتطبيقات Ember التي تم إنشاؤها حديثًا والتي من شأنها منع استخدام أسماء معلمات الكتلة المربكة (حيث يمكن أن يكون معلمة الكتلة اسم عنصر HTML ، ويتم استدعاء عنصر HTML هذا في قالب الكتل).
• Backport هذه الإصلاحات لـ Ember 3.3

لقد كنت أواجه هذه المشكلة نفسها خلال اليومين الماضيين وكذلك أحاول معرفة ما كان يحدث:

<select>
    {{#each options as |option|}} <!--I see now the issue is I named this "option" a valid html tag -->
        <option value="{{option.id}}">{{option.name}}</option>
    {{/each}}
</select>

أدى التغيير إلى هذا إلى إصلاح المشكلة أيضًا لـ:

<select>
    {{#each options as |opt|}} <!-- Renamed to "opt" -->
        <option value="{{opt.id}}">{{opt.name}}</option>
    {{/each}}
</select>

مجرد إلقاء هذا هناك لمزيد من الوثائق حول هذه القضية.

مجرد إلقاء هذا هناك لمزيد من الوثائق حول هذه القضية.

👍 شكرا على ذلك (وآسف على المشكلة)

rwjblue أنا لست قاعدة Lint للقالب no-shadowed-elements في https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rules .md

هل توجد في مكان آخر؟

cafreeman غير مدرج هناك (رغم أنه يجب أن يكون) ، لكن القاعدة هنا

آه ، لا أصدق أنني فاتني ذلك. شكرا لك!

القاعدة no-shadowed-elements ليست وصفية للغاية ، انتهى الأمر هنا بالاعتقاد أن القاعدة كانت مشكلة أخرى تتعلق بالتنسيق فقط (في vscode مع الملحق ember لا يوجد فرق بين مشكلات التنسيق والأخطاء ، أعتقد مع linter أيضًا؟ ).

سؤالي هل سيكون لهذا خطأ أفضل في المستقبل؟ لن يقوم الجميع بتشغيل linter ويمكنني أن أتخيل أن زملاء العمل يواجهون هذا ولا يعرفون ما يحدث عندما يكون هناك خطأ غير مفيد.

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

أنا في الحقيقة محتار لماذا هذا غامض:

{{#each options as |option|}}
  <option value={{option.value}}>{{option.label}}</option>
{{/each}}

ألا يلزم استدعاء مكونات قوس الزاوية بحرف كبير؟

ألا يلزم استدعاء مكونات قوس الزاوية بحرف كبير؟

لا ، راجع قسم الاستدعاء الديناميكي في RFC للحصول على الخلفية.

هل يمكن لأي شخص إعادة إنتاج هذا في أحدث إصدار مستقر من Ember؟

pzuraq نعم ، يمكنني إعادة إنتاج هذا الخطأ باستخدام 3.8.0

فقط لجعل الأمور مربكة بشكل لا يصدق ، يمكن أن يحدث هذا (حدث لي)
تشغيل Ember 3.4

{{#each someArray as |item i|}}
  {{#if (gt i 0)}}
    {{fa-icon item.icon}}
  {{/if}}
{{/each}}

على الرغم من أنني لم أكن أستخدم عنصرًا <i> ، إلا أن المكون {{fa-icon}} (من خط ember رائع) يُنشئ واحدًا ، وقد تسبب هذا في حدوث خطأ Uncaught Error: unreachable الممتع

أيضًا ، لم يتم اكتشاف ذلك من خلال no-shadowed-elements بـ ember-template-lint ، مما يجعل من الصعب العثور عليه وتشخيصه :(

أستطيع أن أرى تمامًا كيف سيكون ذلك مربكًا جدًا. داخليًا ، يعدل ember-font-awesome قالب الإخراج ويستبدل استدعاء المكون {{fa-icon مباشرة بـ <i> وهو الشيء الذي تسبب في الخطأ الذي أصابته.

RE: هذا لم يتم اكتشافه بواسطة no-shadowed-elements ، أعتقد أنه يمكننا القيام ببعض العمل في تحويل AST الرائع ember للتأكد من عدم وجود هذا السيناريو المحدد (خطأ في الأساس أو إعادة كتابة أي كتلة تلقائيًا المعلمات المسماة i أثناء التحويل).

تضمين التغريدة لا يمكن أن يكون اسم رمز rwjblue ديناميكيًا في fa-icon (https://github.com/FortAwesome/ember-fontawesome/blob/master/lib/ast-transform.js#L37)

لدينا ديناميكية fa-icon كل مكان ، إنها تعمل. متأكد من أن ما قمت بربطه سيكون قد قام بالفعل بتحويله إلى سلسلة. وإلا فلن تكون هناك فرصة حتى لاستخدام الحزمة.

يمكنك أيضًا إرسال عنصر به مجموعة iconName و prefix .

عذرًا - سواء كانت أسماء الرموز الديناميكية تعمل أم لا ، فهذه مجرد مشكلة في المثال الذي قدمته ، لكن النقطة لا تزال قائمة.

يتم استخدام أساس هذا المثال المحدد (باستخدام i كمعلمة كتلة ، و fa-icon في الكتلة الداخلية) في عدد غير ضئيل من الأماكن في جميع أنحاء قاعدة الكود الخاصة بي - انتهى بي الأمر بإعادة تسمية الكل يستخدم block param من i إلى index للتأكد

ومن الجدير بالذكر أيضًا أن هناك مشروعين رائعين يتم تنفيذهما ، اعتمادًا على إصدار FA الذي تستخدمه. ربما لديهم اختلافات في ما يدعمونه وما إلى ذلك.
https://github.com/martndemus/ember-font-awesome
https://github.com/FortAwesome/ember-fontawesome

هل ما زالت هذه القضية قيد النظر؟ يبدو أنه مر عام تقريبًا منذ الإبلاغ عنه ولكني واجهت

خطأ لم يتم اكتشافه: لا يمكن الوصول إليه

رسالة اليوم مع الكود التالي في Ember v3.4.4 (والذي أعتقد أنه إصدار LTS حالي).

<select>
    {{#each options as |option|}}
        <option value={{option.id}}>{{option.name}}</option>
    {{/each}}
</select>

ملاحظة لقد قمت منذ ذلك الحين بتغيير الرمز إلى:

<select>
    {{#each options as |opt|}}
        <option value={{opt.id}}>{{opt.name}}</option>
    {{/each}}
</select>

الذي يعمل بشكل واضح.

Caltor أحدث LTS - 3.8 https://emberjs.com/releases/

lifeart تقول أيضًا 3.4

3.4 سيتلقى إصلاحات الأمان فقط في هذه المرحلة ، وسيتلقى 3.8 إصلاحات الأخطاء حتى تتم ترقية 3.12 إلى LTS

rwjblue إذن LTS تعني في الواقع "نتجاهل الخطأ حتى انقضاء فترة LTS"؟ مثير للإعجاب. كنت أعتقد أن الأخطاء التي تم رصدها خلال فترة LTS سيتم إصلاحها. ما زلت أفهم أنه مشروع مجتمعي وما إلى ذلك وما إلى ذلك ، ولا توجد مشكلة كبيرة في الحل.

Caltor https://github.com/emberjs/ember.js/issues/16826#issuecomment -405654150 هناك حل بديل لهذه الحالة ، والحل واضح جدًا وهو يتبع قواعد الفحص الرسمية https://github.com/ember- template-lint / ember-template-lint / blob / master / docs / rule / no-shadowed-elements.md

Caltor - أنا آسف لأننا لم يتم إصلاح هذا لـ LTS. 😩

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

تضمين التغريدة إذا كان اللنتر يلتقطها فهذا جيد. إنها فقط نتيجة لسوء الترميز على أي حال.

تحدث هذه المشكلة أيضًا عندما يكون تجزئة المكونات المُنتجة لها نفس اسم المساعد ، ولا يلتقطها linter.

<AngleTable as |t|>
  <t.header />
  {{t "unreachable"}}
</AngleTable>

BobrImperator لست متأكدًا من أن المشكلة هي شيء يمكن

function foo() {

}

function bar(foo = 'a string') {
  foo(); // Error: foo is not a function
}

في حين أنه من المعقول أن نفترض أن هذا خطأ في الظل من جانب المطور ، بسبب الطبيعة الديناميكية لـ JS ، لا يمكننا أن نعرف على وجه اليقين أن foo هو _not_ دالة عند تمريره إلى bar . إذا كنا نستخدم لغة مكتوبة بدلاً من ذلك ، فقد نتمكن من ذلك ، لكن للأسف لا أعتقد أنه يمكننا ذلك حاليًا.

لقد عبرت عن نفسي نوعًا ما بشكل سيء ، ولا أتوقع حقًا أن يتم القبض على هذا مسبقًا.
ولكن إذا كنت أتذكر بشكل صحيح ، فهناك خطأ في التحويل البرمجي لـ action helper عند الكتابة فوقه.
لا أتذكر الصيغة الدقيقة ، لكن يجب أن تكون شيئًا كهذا ، مشابه لكن مع action .

<AngleTable as |action|>
  <t.header />
  {{action "unreachable"}}
</AngleTable>

يمكن أن تكون حالة مختلفة بالرغم من ذلك

لقد أمضيت للتو بضع ساعات في تصحيح الأخطاء حتى بحثت في Google أخيرًا ووجدت هذه المشكلة (كانت تستخدم الخيار والاسم الناتج) لذلك لا تزال موجودة في 3.15.

الشيء الغريب هو أن {{log option}} أبلغ عن القيمة الصحيحة داخل الحلقة ، لذلك لم يخطر ببالي مطلقًا أن اسم المتغير قد يكون هو المشكلة

في 3.16.6 سبتمبر ، لا يزال يحدث في ios safari.