私は SaaS アプリケーションを設計しており、Backbone.js に誘導されています。このサービスは、それぞれの発生回数などの DOM イベントを追跡し、この情報に基づいてスコアを適用します。
データをモデルとコレクションに分離することは非常に魅力的ですが、詳細に入る前に、それが仕事に適したツールであるかどうかを調べたいと思います。
JavaScript テンプレートを作成するのではなく、サイト所有者ページの HTML に記述された既存の DOM 要素を操作したいと考えています。したがって、データ モデルを更新する既存の要素の DOM イベントを追跡します。サービスを利用するサイト所有者は、モデル内のデータを使用して独自のビューを作成し、ニーズに合わせた独自のテンプレートをレンダリングできます。
Backbone.View を使用してイベントを追跡する必要があることを理解しています。これまで読んだ内容から、Backbone にはこれを可能にする柔軟性があるようです。しかし、多くのフォーム要素で一連のイベントを追跡するために Backbone を使用した私の調査では、例を見たことがありません。
たとえば、次のコードをご覧ください。
App.Models.Event = Backbone.Model.extend({
defaults: {
clicks: 0,
dblClicks: 0,
tabs: 0,
kbdFunctions: 0
},
urlRoot: 'events'
});
App.Views.Event = Backbone.View.extend({
model: new App.Models.Event(),
events: {
'click input' : 'clickCount',
'dblclick input' : 'dblClickCount',
'tabEvent input' : 'tabCount',
'kbdEvent input' : 'kbdEventCount'
},
initialize: function () {
this.el = $('[data-transaction=start]');
},
clickCount: function (e) {
console.log('click counted');
},
dblClickCount: function (e) {
console.log('double click counted');
},
tabCount: function (e) {
console.log('tab counted');
},
kbdEventCount: function (e) {
console.log('keyboard event counted');
}
});
input、textarea、selectオプションで発生し、要素button内に含まれるクリック、ダブルクリック、タブ、およびその他のカスタムキーボードイベントを追跡できるようにしたいと考えています。[data-transaction=start]第一に、これはバックボーンに適用可能なユースケースですか?第二に、もしそうなら、Backbone.View イベント オブジェクト リテラル内に複数の要素を追加する最良の方法は何ですか? ドキュメントや他の場所でこの例を見たことがありませんが、次のように変数を追加できればよいでしょう。
...
var someVariable = input, textarea, select, button;
events: {
'click someVariable' : 'clickCount',
...