オンクリック動作を備えたRabletJSイテレータ

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

質問

テンプレートを入力するときに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>";
.

それから私は新しいRabletインスタンスを構築します

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例

ヨブの正しい図書館ではないRabletsjsはありますか？私の検索で私を助けてくれてありがとうございました。

役に立ちましたか？

解決

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]();
});
.

他のヒント

このようなコードを簡単にすることができます。

 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)
 })
.

テンプレートのオンクリック属性の値を考えると、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);
  }
});
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top