مكرر RactiveJS مع سلوك النقر

Question

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

تقوم إحدى الخدمات بتغذية تطبيقي بكائن JSON يبدو كهذا

var data = {
    "users": {
        "Aaron": {
            "age": "31",
            "level": "legit",
            "talk": function(){
                console.log("Howdy! I'm " + this.level);
            }
        },
        "Pete": {
            "age": "30",
            "level": "godlike",
            "talk": function(){
                console.log("Howdy! I'm " + this.level);
            }
        }
    }
};

يبدو أن القالب الخاص بي صحيح وفقًا لتعليمات توثيق

var usersTemplate = "<ul>{{#users:name}}<li><a href='#' on-click='talk'>{{name}} says:</li>{{/users}}</ul>";

ثم أقوم بإنشاء مثيل Ractive جديد

var people = new Ractive({
    el: "#userlist",
    template: usersTemplate ,
    data: data
});

المشكلة هي أن النقر على كل مستخدم لن يفعل أي شيء في الواقع لأن RactiveJS لا يبدو أنه يعمل بهذه الطريقة.يتعامل مع الأحداث مثل هذا.

people.on({
    talk: function(evt){
        evt.original.preventDefault();
        console.log("I clicked on the template");
    }
});

ما أحاول القيام به هو تشغيل action وظيفة داخل كائن البيانات الذي مررته دون أن تعرف وحدة التحكم اسم الطريقة.يجب أن يكون تحديده في القالب وفي كائن البيانات كافيًا.

يوفر Ractive معلومات كافية حتى أتمكن من اجتياز كائن البيانات، لكن هذا ليس جيدًا بما يكفي.

people.on({
    talk: function( evt ) {
        evt.original.preventDefault();
        var pointer = json_output;
        var path = evt.keypath.split(".");
        for( var i = 0; i < path.length; i++){
            console.log(i);
            pointer = pointer[path[i]];
        }
        if(pointer.hasOwnProperty("action") && typeof(pointer.action) === "function") {
            pointer.action(evt);
        }
    }
});

مثال JSBin

هل RactiveJS ليست المكتبة المناسبة لهذا المنصب؟أشكركم مقدما لمساعدتي في بحثي.

Answer 1

على الرغم من أن Ractive لا يسمح لك باستدعاء الوظائف مباشرة، إلا أنه يدعم وسيطات الأحداث، لذلك يوجد حل بديل رائع لهذا:

<a on-click="call:talk">Talk</a>

var ractive = new Ractive({
    el: "#userlist",
    template: usersTemplate,
    data: data
});

ractive.on('call', function ( event, method ) {
    event.context[method]();
});

Answer 2

يمكنك تبسيط التعليمات البرمجية الخاصة بك مثل هذا:

 people.on({
     talk: function( evt ) {
         evt.original.preventDefault();
         evt.context.talk(evt)
     }
 });

علاوة على ذلك، يمكنك التفكير في المزيد meta طريقة القيام بذلك:

 function getProxyHandler(eventName) {
    return function(event) {
       event.context[eventName](event)
    }
 }

بهذه الطريقة قد يتم تعيين الأحداث الخاصة بك مثل:

 people.on({ 
     talk:getProxyHandler('talk'), 
     eat: getProxyHandler('eat') 
 })

باستخدام الأحداث المخصصة التي أظهرها @Martin، يمكنك تغيير المعالج لتطبيق أو استدعاء الوظيفة داخل حدث مثل هذا:

 people.on('call' , function(event, method) {
      method.call(event.context)
 })  

Answer 3

هل هناك طريقة لأتمتة إنشاء الكائن الذي تنتقل إليه people.on() بالنظر إلى قيمة سمات النموذج عند النقر؟يقوم Ractive بإزالة هذه السمات عند النقر

بخلاف ذلك، يمكن اختراق شيء مثل هذا باستخدام jQuery

var people = new Ractive({
    el: "#userlist",
    template: usersTemplate,
    data: data,
    complete: function(){
        var onHandler = {}, action;

        $("[on-click]", "#userlist").each(function(e){

            action = $(this).attr('on-click');
            onHanlder[action] = getProxyHandler(action);

       });

    this.on(onHandler);
  }
});