باستخدام الجمرة.شبيبة, كيف يمكنني تشغيل بعض شبيبة بعد عرض يتم تقديم?

Question

كيف يمكنني تشغيل وظيفة بعد إدراج عرض الجمرة في دوم?

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

Answer 1

تحتاج إلى التجاوز didInsertElement لأنه "يتم استدعاؤه عندما يتم إدراج عنصر العرض في DOM.تجاوز هذه الوظيفة للقيام بأي إعداد يتطلب عنصرًا في نص المستند."

داخل didInsertElement رد الاتصال، يمكنك استخدام this.$() للحصول على كائن jQuery لعنصر العرض.

مرجع: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

Answer 2

يمكنك أيضًا استخدام طريقة afterRender

Genacodicetagpre

Answer 3

الجمرة 2.x:تم إهمال العرض ، استخدم المكون بدلا من ذلك

عليك أن تفهم دورة حياة المكون لمعرفة متى تحدث أشياء معينة.

كما يتم تقديم المكونات ، وإعادة تقديمها وإزالتها أخيرا ، يوفر إمبر السنانير دورة الحياة التي تسمح لك لتشغيل التعليمات البرمجية في أوقات محددة في حياة المكون.

https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/

عموما, didInsertElement هو مكان عظيم للتكامل مع المكتبات 3 الحزب.

يضمن هذا الخطاف شيئين (2) ,

1. تم إنشاء عنصر المكون وإدراجه في دوم.
2. يمكن الوصول إلى عنصر المكون عبر المكون $() الطريقة.

تحتاج إلى تشغيل جافا سكريبت كلما تغيرت السمات

تشغيل التعليمات البرمجية داخل didRender هوك.

مرة أخرى ، يرجى قراءة وثائق دورة الحياة أعلاه لمزيد من المعلومات

Answer 4

بدءًا من Ember 3.13 ، يمكنكاستخدم المكونات التي ترث من Glimmer ، وهذا المثال أدناه يوضح كيف يمكن أن يبدو ذلك: Genacodicetagpre

لا تحتوي مكونات نمط العرض هذه على روابط دورة حياة مباشرة ، بدلاً من ذلك ، يمكنك استخدام render-المعدلات لإرفاق وظيفة.يمكن العثور على مقدمة غير رسمية للمعدِّلات هنا

تكمن فائدة ذلك في أنه ، من الواضح أن مسؤوليات النموذج تصبح أكثر وضوحًا.

فيما يلي رمز وصندوق قابل للتشغيل إذا كنت تريد أن تتلاعب بهذا: https://codesandbox.io/s/octane-starter-ftt8s

Answer 5

تحتاج إلى إطلاق ما تريد في didInsertElement رد الاتصال في العرض الخاص بك:

MyEmberApp.PostsIndexView = Ember.View.extend({

  didInsertElement: function(){
    // 'this' refers to the view's template element.
    this.$('table.has-datatable').DataTable();
  }

});