索引視圖中的複選框實時更新

我目前正在學習rails並致力於確定每個人的第一個rails應用程序，一個簡單的待辦事項列表。我需要實現項目旁邊的複選框以表明它們是否完整。每個項目在其模型中都有一個名爲「completed」的布爾屬性。我在搜索過程中發現了一些複選框問題，但在索引視圖的上下文中沒有解釋語法。索引視圖中的複選框實時更新

此外，我真的希望複選框沒有提交按鈕工作。我知道我可以使用AngularJS的ng模型來完成這樣的事情，但我不認爲這麼實現角度對於這麼小的事情是實際的，我不知道角度如何與rails一起工作。

如果有人能給我一個正確的方向指針，將不勝感激。這裏是我的index.html.erb供參考。

<h1> 
    To Do List 
</h1> 
<table> 
    <tr> 
    <% @todo_items.each do |item| %> 
     <!-- Checkbox here --> 
     <tc style="<%= 'text-decoration: line-through' if item.completed %>"> 
     <%= link_to item.title, item %> 
     </tc> 
     <tc> 
     <%= item.description %> 
     </tc> 
     <tc> 
     <%= link_to "Edit", edit_todo_item_path(item) %> 
     </tc> 
     <tc> 
     <%= link_to "Delete",item, data:{:confirm => "Are you sure you want to delete this item?"}, :method => :delete %> 
     </tc> 
     <hr/> 
    <% end %> 
    </tr> 
</table> 
<p> 
    <%= link_to "Add Item", new_todo_item_path %> 
</p>

來源

2015-06-28 WorkForPizza

這是我的路，我不知道這種方式是正確的方向或沒有，但這個工作對我來說（也有不同情況，但相同的概念）。

意見的複選框

你可以把一個id物品或東西放到checbox的屬性用於查找控制器的對象，如果你將數據發送到控制器，用於獲取對象的記錄，如果屬性完成備案的，你可以定義是真是假：

<%= check_box_tag :completed_item, 1, item.completed? ? true : false, { class: 'name-of-class', data: { id: item.id} } %>

控制器

需要兩個行動呼籲set_completed和remove_completed，而且你不需要爲他們的模板，只需使用格式爲JSON ：

before_action :set_item, only [:set_completed, :remove_completed, :other_action] 

    def set_completed 
    @item.set_completed! 
    respond_to do |format| 
     format.json { render :json => { :success => true } } 
    end 
    end 

    def remove_completed 
    @item.remove_completed! 
    respond_to do |format| 
     format.json { render :json => { :success => true } } 
    end 
    end 

    private 

    def set_item 
    @item = Item.find params[:id] 
    end

型號

爲set_completed!和remove_completed!，你可以在你的模型中定義

def set_default! 
    self.update_attributes(:completed => true) 
end 

def remove_default! 
    self.update_attributes(:completed => false) 
end

路線

另外，你需要幫助的JavaScript從視圖句柄發送請求到控制器事件點擊複選框：

jQuery的

$(".completed_item").click(function(){ 
    var check = $(this).is(":checked"); 
    if (check == true){ 
    set_completed($(this).attr('data-id')); 
    } else{ 
    remove_completed($(this).attr('data-id')); 
    } 
}); 


function set_completed(data_id) { 
    $.ajax({ 
    type: 'POST', 
    url: "/items/set_completed", 
    data: { id: data_id}, 
    dataType: 'json', 
    success: function(response){ 
     if(response){ 
     }else{ 
     alert('error'); 
     } 
    } 
    }) 
} 

function remove_compelted(data_id) { 
    $.ajax({ 
    type: 'POST', 
    url: "/items/set_completed", 
    data: { id: data_id}, 
    dataType: 'json', 
    success: function(response){ 
     if(response){ 
     }else{ 
     alert('error'); 
     } 
    } 
    }) 
}

希望這有助於。

來源

2015-06-28 02:51:23

索引視圖中的複選框實時更新

回答

相關問題