클릭 시 동작을 지원하는 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);
  }
});