索引视图中的复选框实时更新 [英] Checkbox in index view live updating

问题描述

我目前正在学习 rails 并致力于开发我确信这是每个​​人的第一个 rails 应用程序，一个简单的待办事项列表.我需要在项目旁边添加一个复选框以指示它们是否完整.每个项目在其模型中都有一个名为已完成"的布尔属性.我在搜索时发现了几个复选框问题，但没有一个很容易在索引视图的上下文中解释语法.

I'm currently learning rails and working on what I'm sure is everyone's first rails app, a simple todo list. I need to implement a checkbox next to the items to indicate whether they are complete or not. Each item has a boolean attribute called "completed" in their model. I have found a couple checkbox questions while searching but none explain the syntax very easily in the context of the index view.

此外，我真的希望复选框在没有提交按钮的情况下也能工作.我知道我可以使用 AngularJS 的 ng-model 来完成这样的事情，但我认为为这么小的事情实现 angular 是不切实际的，我不知道 angular 是如何与 rails 一起工作的.

Also, I really want the checkbox to work without a submit button. I know I could accomplish something like this using AngularJS's ng-model but I don't think it would be practical to implement angular for such a small thing and I don't know how angular works with rails.

如果有人能给我一个正确方向的指针，我将不胜感激.这是我的 index.html.erb 供参考.

If anyone could give me a pointer in the right direction, it would be greatly appreciated. Here's my index.html.erb for reference.

<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>

推荐答案

这是我的方式，我不知道这种方式是否正确，但这对我有用(也是不同的情况，但概念相同).

This is my way, I don't know this way is right direction or not but this works for me (also different case but same of concept).

复选框的视图

如果您将数据发送到控制器以获取对象的记录，您可以将 id 项或其他内容放入复选框的属性中以在控制器中查找对象，并且您可以定义记录的完成属性是真还是假:

You could put an id item or something into attribute of checkbox for find an object in controller if you send data to controller for get record of object, and you could define if attribute completed of record is true or false:

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

控制器

你需要两个动作调用set_completed和remove_completed，而且你不需要模板，只需使用格式为json:

You need two action call set_completed and remove_completed, and also you don't need templates for them, just use format as 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! 你可以在你的模型中定义

For set_completed! and remove_completed! you could define in your model

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

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

路线

resources :address do
 collection do
   post 'set_completed'
   post 'remove_completed'
 end
end

此外，您需要帮助 JavaScript 来处理从视图到控制器事件单击复选框的发送请求:

Also, you need help JavaScript for handle send request from view to controller event click of checkbox:

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');
      }
    } 
  })
}

这篇关于索引视图中的复选框实时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！