Question

我正在学习rails并且正在研究我确信每个人的第一个rails应用程序，一个简单的待办事项清单。我需要在项目旁边实现一个复选框，以指示它们是否完整。每个项目在其模型中都有一个名为“completed”的布尔属性。我在搜索时发现了几个复选框问题，但没有一个在索引视图的上下文中很容易解释语法。

另外，我真的希望复选框在没有提交按钮的情况下工作。我知道我可以使用AngularJS的ng模型来完成这样的事情，但我不认为为这么小的东西实现角度是不切实际的，我不知道角度如何与轨道一起工作。

如果有人能给我一个指向正确方向的指针，我将不胜感激。这是我的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>

Answer 1

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

复选框视图

如果您将数据发送到控制器以获取对象的记录，您可以将一个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

路由

resources :address do
 collection do
   post 'set_completed'
   post 'remove_completed'
 end
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');
      }
    } 
  })
}

希望得到这个帮助。

索引视图中的复选框实时更新

1 个答案: