BensonKuo/FOODem — pull request #2 by HannahWang (2014-05-10 02:21:41+00:00)
Title: indexhaha.js

(function(){

// 插入

之
樣板
var tmpl = '
',
addButton = $('#add'),
connected = $('.connected'), // 三個

placeholder = $('#placeholder'), // 三個

的容器
mainUl = $('.main'), // main

deleteUl = $('.delete'), // delete

doneUl = $('.done'); // done

start_id = 0;
// 點擊按鈕時，插入新項目
//
addButton.on('click', function(){
$(tmpl).prependTo(mainUl).addClass('is-editing').find('input').focus();
});

// 按 Enter 鍵時完成編輯並存檔
//
mainUl.on('keyup', 'input', function(e){
// 若目前的鍵是「enter」
if(e.which === 13){
var input = $(this), li = input.parents('li');

var newitem = {
texing: input.val(),
is_done: 0
}

// 把 的值複製到 裡
li.find('span').text( input.val() );

// 取消
的編輯模式（is-editing class）
li.removeClass('is-editing');

// 把整個表存進 localStorage
//save();
$.ajax({
type: 'POST',
data: newitem,
url: '/items',
dataType: 'JSON'
}).done(function( response ) {
// Check for successful (blank) response

console.log('create successed');
});
}
});

// 從 localStorage 讀出整個表，放進 ul
load();

// 把 ul 初始化為 sortable
mainUl.sortable();
deleteUl.sortable();
doneUl.sortable();

$( ".main" ).sortable( "option", "connectWith", ".delete, .done" );

mainUl.on('sortstart', function(event, ui){
console.log('sort_start',ui.item);
start_id = ui.item.index();
placeholder.addClass('is-dragging');
});

deleteUl.on('sortreceive', function(event, ui){

// var temp_id;
// var temp_text = ui.item.find('span').text();
// console.log('del receiving:',ui.item.find('span').text());

// for ( var i=0 ; i< big_table.length ; i+=1){
// if( temp_text === big_table[i].texing){
// temp_id = big_table[i].id;
// console.log('deleting',temp_id);
// }
// }

$.ajax({
type: 'DELETE',
url: '/items/' + start_id
}).done(function( response ) {

// Check for a successful (blank) response
console.log('delete successed');
});

$(ui.item).remove();

//save();
// big_table.splice(temp_id, 1);
// for (i =0; i -1 ){
$.ajax({
type: 'PUT',
url: '/items/' + start_id +'/reposition/'+ stop_id
}).done(function( response ) {

// Check for a successful (blank) response
console.log('reposition successed');
});
}

// for (i =0; i 裡的文字放進陣列裡
// mainUl.find('span').each(function(event, ui){

// arr.push({
// is_done: $(this).parent('li').hasClass( "is-done" ),
// texing: $(this).text()
// });

// });

// // 把陣列轉成 JSON 字串後存進 localStorage
// localStorage.todoItems = JSON.stringify(arr);
// }

// 從 localStorage 讀出整個表，放進

//
function load(){

$.get(
'/items',
{},
function(arr){
// 拿到從server傳回的data
// var arr = JSON.parse( data ), i;
// 對於陣列裡的每一個項目，插入回 ul 裡。
for(i=0; i