リンク先の動的に生成されたリストを持つ単純な Ember アプリケーションがあります。リンクごとに 1 回クリックすると、クリックされた項目に関する詳細が表示されます。また、リンク先に「ondblclick」イベントを追加したいと考えています。これはまったく可能ですか?そうでない場合は、シングルクリックとダブルクリックのリンク先に執着していません。シングルクリック イベント用に既に持っている機能を保持し、ダブルクリック イベントを追加できるようにしたい (理想的には、その間にシングルクリック イベントを発生させずに)。ダブルクリックされたタイトルとそれに関連付けられたIDを保存できるようにしたい。これに Ember.View オブジェクトを使用してみました (以下にコメントアウト)、リンク先に {{action "collectDoubleClicked" on="doubleClick"}} を追加しようとしましたが、うまくいきません。これまでのところ運がありません。どんな助けでも大歓迎です。ここに私のHTMLがあります:
<script type="text/x-handlebars" data-template-name="application">
<div id="headerDiv">
<ul>
<li>
<image src="logo.png" style="width:439px;height:102px;"/>
</li>
<li>
{{#link-to 'home'}}Home{{/link-to}} | {{#link-to 'help'}}Help{{/link-to}}
</li>
</ul>
</div>
<div class="collections">
{{partial 'collections'}}
</div>
<div class="statistics">
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="collections">
<div id='collectionsDiv'>
{{#each}}
{{#link-to 'item' this }} <!-- {{action "collectToSearch" on="doubleClick"}} -->
{{title}}
{{/link-to}}
{{/each}}
</div>
</script>
そして私のJavaScript:
App = Ember.Application.create();
App.Router.map(function () {
this.resource('home', {
path: '/'
});
this.resource('help');
this.resource('item', {
path: ':item_id'
});
});
App.ApplicationRoute = Ember.Route.extend({
model: function () {
return items;
}
});
var items = [{
id: 1,
title: 'Item 1',
contentType: 'Image',
description: 'description 1'
}, {
id: 2,
title: 'Item 2',
contentType: 'Text',
description: 'description 2'
}, {
id: 3,
title: 'Item 3',
contentType: 'Undefined',
description: 'description 3'
}];
App.ApplicationController = Ember.ArrayController.extend({
actions: {
collectDoubleClicked
function () {
console.log("collectToSearch: ", this.get('model.title'));
}
}
});
/**
App.Application = Ember.View.extend({
itemTitles: [items.length],
itemIds: [items.length],
itemCountDoubleClick: 0,
doubleClick: function (title, id) {
console.log("double click");
itemTitles[itemCountDoubleClick] = title;
itemIds[itemCountDoubleClick] = id;
itemCountDoubleClick++;
return false;
}
});
**/