私は backbone.js をまったく初めて使用し、悪名高い「todos」アプリを詳しく調べて、その感触を掴み始めたところです。localtodos.comには優れたドラッグ アンド ドロップ機能が含まれているのに対し、バックボーンの例には含まれていないことに気付きました。localtodos のドラッグ アンド ドロップは Mootools で実装されていますが、代わりに jQuery と jQuery UI を使用したいと考えています。
すでに実装されているように見える例に出くわしましたが、試してみると data-id 属性に問題があります。追加:
<%= id ? 'data-id="'+id+'"' : '' %>
テンプレートに追加すると、todo アイテムを入力できなくなります。コンソールに次のエラーが表示されます。
Uncaught ReferenceError: ID が定義されていません
しかし、ドラッグ アンド ドロップの実装が AppView テンプレートの初期化関数に含まれているため、ドラッグ アンド ドロップが可能になります。
this.$("#todo-list").sortable({
update: function(event, ui) {
$('div.todo',this).each(function(i) {
var id = $(this).attr('data-id'),
todo = Todos.get(id);
todo.save({order: i + 1});
});
}
});
data-id 属性コードを削除すると、todo 項目を再び入力できますが、ページを更新しても順序は保存されません (明らかに)。
data-id 属性の問題が何であるかを理解できません。私が使用しているコードのより完全な例は、gist hereとして入手できます。