2

テンプレートに入力するときに、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 はこの仕事に適したライブラリではないでしょうか? 私の検索で私を助けてくれてありがとう。

4

3 に答える 3

4

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]();
});
于 2014-07-31T21:16:50.047 に答える
1

次のようにコードを単純化できます。

 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)
 })
于 2014-07-31T19:16:20.297 に答える