التعبيرات النشطة لا تعمل بعد إعادة التعيين ()

StackOverflow https://stackoverflow.com//questions/25077763

  •  02-01-2020
  •  | 
  •  

سؤال

يستخدم فريقي حاليًا Ractive لعرض سلسلة من التنبيهات.كل تنبيه:

  • يعرض طريقة عرض باستخدام Ractive
  • ابدأ تويتر widgets.js الذي يقوم ببعض التلاعب بـ DOM (لتضمين التغريدات)
  • تغيير البيانات في طريقة العرض هذه لاحقًا (عندما يحدد المستخدم تنبيهًا مختلفًا)

نظرًا لأن تغييرات DOM الخاصة بـ Twitter تتداخل مع DOM الافتراضي الخاص بـ Ractive، فإننا نستخدم حاليًا ractive.reset() لإعادة ضبط DOM بعد Twitter widgets.js التشطيبات - reset() يمنع مجموعة كاملة من مشاكل DOM مثل cannot appendChild of null والذي قد يحدث لأن Twitter تلاعب بـ DOM خلف ظهر Ractive.

ولكن بعد أن نركض ractive.reset() يبدو أن التعبيرات لم تعد تعمل.

هل هذه هي الطريقة الصحيحة للتعامل مع المكتبات الأخرى التي قد تتلاعب بـ DOM؟كيف يمكنني جعل التعبيرات تستمر في العمل بعد reset() ?

فيما يلي عرض توضيحي سريع - لاحظ أن التعبير يعمل قبل reset() ولكن ليس بعد ذلك:

    <body>
        <h1>test</h1>
        <div class="bound"></div>
        <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>

        <script>
            var binding = new Ractive({
                el: document.querySelector('.bound'),
                data: {
                    name: 'mike',
                    swaggify: function(string) {return 'SWAG'+string}
                },
                template: '<p>Hello, {{ swaggify(name) }}!</p>'
            })

            binding.reset().then(function(){
                binding.data.name = 'steve'
            })
        </script>
    </body>

و ال إلزامية JSFiddle

هل كانت مفيدة؟

المحلول

عندما تتصل ractive.reset(), ، فهو يحل محل data الكائن - في هذه الحالة، يتضمن ذلك swaggify وظيفة.إذا قمت بإعادته فإنه يعمل بشكل جيد: http://jsfiddle.net/rich_harris/49JAK/

(لاحظ أنني قمت بوضع رمز التحديث مباشرة بعد الاتصال بـ binding.reset() - التغييرات تحدث بشكل متزامن .then() يسمح لك فقط بجدولة وظيفة عند اكتمال أي انتقالات.إنها متوافقة مع الوعود/A+ لذا فالرمز بداخلها .then() سيكون دائمًا غير متزامن - في بعض المواقف يمكن أن يسبب وميضًا، لذا فإن المزامنة > غير متزامنة حيثما كان ذلك ممكنًا.)

ربما لا يكون هذا ما تريده - فأنت تريد أن تكون قادرًا على التعامل مع البيانات والمنسقات بشكل مختلف.النهج الجيد هو وضع المنسقين على النموذج الأولي data الكائن الذي يرثه جميع الآخرين:

var helpers = Ractive.defaults.data; // Ractive.defaults === Ractive.prototype
helpers.swaggify = function(string) {return 'SWAG'+string};

var binding = new Ractive({
  el: document.querySelector('.bound'),
  data: {
    name: 'mike',
    swaggify: function(string) {return 'SWAG'+string}
  },
  template: '<p>Hello, {{ swaggify(name) }}!</p>'
})

عرض توضيحي لهذا النهج هنا: http://jsfiddle.net/rich_harris/chYD6/.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top