オンクリック動作を備えたRabletJSイテレータ
-
23-12-2019 - |
質問
テンプレートを入力するときに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");
}
});
.
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);
}
}
});
.
ヨブの正しい図書館ではない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);
}
});
.