javascript - 在 ruby​​ on Rails 4 中完成项目

Question

我已经迁移了一个 :completed bool 值，然后将其添加到我的表单中，如下所示 (simple_form)

<%= f.input :completed, as: :boolean %>

这允许我更新已完成，而不是在编辑 View 中完成。

如何在索引 View 中编辑 :completed 方法？我希望能够即时更新完整或不完整。

编辑:

我的表格

<%= f.input :completed, as: :boolean, input_html: { class: 'completed', id: @todo.id } %>

我的 View (标签必须位于根据materializecss输入之后)

<%= check_box_tag todo.id, 'completed', todo.completed?, class: 'completed' %>
<label class="strikethrough">
  COMPLETE
</label>

JS

// This could be other events as well, so add/change/remove the event trigger as needed
$(document).on('click', '.completed', function(){
    updateCompleted($(this));
});

function updateCompleted($el) {
   var id   = $el.attr('id'),
       val  = $el.is(':checked');

   $.PATCH({ 
     url: '/todos/'+id, 
     data: { todo: { completed: val } }, 
     success: function(){ whatever }, 
     error: function() { whatever }
   });
}

我的 Controller

params.require(:todo).permit(:title, :item, :image, :completed)

Answer 1

这里您将需要一些 AJAX。根据我的经验，这样做有点超出“rails 方式”，但完全可能。

首先，确保您在 dom 中的某个位置拥有该对象的 ID:

<%= f.input :completed, as: :boolean, input_html: { class: 'completed', id: myobject.id %>

我使用了 simple_form 语法，因为这就是您用于表单生成器的语法。如果没有，请回复，我会调整标签。

其次，添加jquery事件监听器:

// This could be other events as well, so add/change/remove the event trigger as needed
$(document).on('click', '.completed', function(){
    updateCompleted($(this));
});

function updateCompleted($el) {
   var id   = $el.attr('id'),
       val  = $el.is(':checked');

   $.PATCH({ 
     url: '/your_endpoint/'+id, 
     data: { your_object_name: { completed: val } }, 
     success: function(){ whatever }, 
     error: function() { whatever }
   });
}

在你的 Controller 中:

private

def your_object_params
   params.require(:your_object).permit(..., :completed)
end

基本上就是这样。