0

所以我正在为客户创建一个照片校对网络应用程序。我希望他能够浏览网站上的图像，并且每个图像下方都有一个“批准”按钮，他可以单击该按钮，图像边框将变为绿色，表示它适合导出。

现在我的 JS/Jquery 知识非常有限，但我知道这可能比前端工作更深入，因为即使在浏览器关闭后我也想看到这些变化，我认为这需要后端和前端最终解决方案。

我正在考虑在我的图像模型下创建一个布尔属性，当您单击“批准”按钮时，它会将布尔值切换为 true，这会将 css 类更改为绿色。rails 有没有办法检测布尔值并相应地更改 css？我希望能够看到我的客户所做的更改。

希望对我的方法有任何反馈/建议，或者是否有更好的方法来解决这个问题。谢谢！

4

3 回答 3

0

我想你快到了。

首先 - 是的，在运行时使用 javascript 更改 css 将立即改变 dom 元素的外观。

在客户端 - 您希望向用户指示已选择哪些图像，但您还需要在提交表单中存储每个元素的批准值。

在 Rails 中，通常会创建隐藏的输入元素来存储额外的数据。鉴于手头的任务 - 他们可以存储 0/1 的值 - 拒绝/批准。您可以提出自己的命名图像/选择值的约定。

然后，在您的视图中，将 onclick 侦听器添加到指向 javascript 函数的图像中：

1) 检查被点击的元素是否已经被选中，2) 改变当前元素的 css，3) 更新该元素的隐藏输入值。

这是一个虚拟演示 - jsfiddle

稍后，您可以从params控制器中获取批准/拒绝的值，例如（见下文）。

如果您想在构造视图时分配一个 css 类并根据approved标志值，您可以执行以下操作：

 <img id="image_<%= image_id %>" src="<%= image_item.path"  class="<%= (image_item.approved.to_i == 1) ? 'approved_img' : 'non_appr_img' %>" %>
 <input id="image_<%= image_id %>_app_flg" type="hidden" value="<%= image_item.approved %>" />

其中 image_item 是一个对象属性path和approved（自我解释），image_id图像对象的 idapproved_img和non_appr_img- css 类。

我不是在讨论用于存储已批准标志的后端，因为它似乎超出了问题的范围

编辑

后端简介

假设您有一个图像模型，请将其扩展为包含一个批准属性（准备数据库迁移并编辑您的模型 .rb 文件以包含新列）。

在视图中，将所有隐藏的输入包含在将提交给控制器的表单中（例如循环遍历图像上的数组）。例如：

 <%= form_for :images, :url => {:action => "approve_images"}, :html => {:name => "testForm"}  do |f| %>
   <!-- TODO do stuff here - eg display images -->
   <% @images.each do |imageItem| %>
     <%= f.hidden_field "#{imageItem.id}_appproved", {:value => imageItem.approved}%>
   <% end %>
   <!-- TODO add a submit button -->
 <% end %>

*您需要这里:images是控制器，approve_images是表单将提交到的控制器中的函数（包括在路由中），@images是一个包含图像数据的数组（来自您的模型），并且您在渲染之前在控制器中准备好了看法。我假设图像具有 ids 和批准的属性。

这将在您的视图中产生如下 dom 元素：

<input id="images_IMAGEID_appproved" name="images[IMAGEID_approved]" type="hidden" value="1" />

提交表单后，在您的控制器中，您将能够像这样访问这些值：

img_approved = params[:images][IMAGEID+"_approved"]

最后，您可以将该值存储到数据库中。祝你好运！:)

我省略了很多更基本的东西，但我认为这个问题太宽泛了，并且有很多资源详细说明了如何创建、读取、编写模型、为视图准备数据等。如果没有 - 请从http://guides.rubyonrails.org/getting_started.html开始

于 2013-10-08T00:29:01.030 回答
0

首先在您的图像表上添加一个布尔类型的已批准列，并在您的图像控制器上添加这些操作

def approve
@image =Image.find(params[:id])
@image.update_column(:approved,true)
respond_to do |format|
format.js
end
end

在路线中添加这些方法

resources :images do
member do 
put :approve
end   
end

在你的 html

 <div class="image">
<img src="<%=@image.source%>" />
 <%= link_to "approve",approve_image_path(@image),:remote=>true,:method=>"PUT",:class=>"approve_me"%>

</div>

在你的 image.js 文件中添加这些方法

 $("body").on("click",".approve_me",function(e){
 e.preventDefault();
 $(this).parents(".image").find("img).css("border-color","green");
 });
于 2013-10-08T00:23:17.320 回答
-1

感谢所有帮助我回答以下问题的人！我想出了一个我非常满意的解决方案，我想我会分享它，希望它可以帮助其他人。

问题：我一直在寻找可以对数据模型进行永久性更改的 AJAX 解决方案。我希望有人能够切换/突出显示页面上的某些项目，并将这些更改保存在后端，以便以后查看。

这需要用户界面的前端 ajax 解决方案和后端解决方案，因此最终更改将保存在数据模型中，因此当我稍后加载站点时，我可以看到他所做的更改。

我的解决方案（在下面回答的人的帮助下）：

  • 后端 - 我创建了一个链接，当按下该链接时，将在我的模型中切换属性为真/假
  • 前端 - 为了给客户端一个实时的感觉，我必须设置链接来执行 ajax 请求并相应地更改 css。

我的控制器：

  def approve
    @pipe = Pipe.find(params[:id])
    respond_to do |format|
        if @pipe.toggle!(:approved)
            format.html { redirect_to root_url }
            format.js
        else
            format.html { render :index }
        end
    end
  end

我的管道表有一个approved:boolean 属性

我的approve.js.erb 文件（我使用div_for(@pipe) 将每个管道包装在一个div 中：

<% if @pipe.approved? %>
        $('div#<%= dom_id(@pipe) %>').children('.flexslider').css('border','4px solid green');
        $('div#<%= dom_id(@pipe) %>').children('a').text('un-approve');
<% else %>
        $('div#<%= dom_id(@pipe) %>').children('.flexslider').css('border','4px solid white');
        $('div#<%= dom_id(@pipe) %>').children('a').text('approve');
<% end %>

我的应用助手：

def approve_text(approvable)
    approvable.approved? ? 'un-approve' : 'approve'
end

我的触发链接（使用上述助手）：

<%= link_to approve_text(pipe), approve_pipe_path(pipe), remote: true, method: 'PUT', class: approve_text(pipe) %>

我的路线：

  resources :pipes do
    member do
        put :approve
    end
  end

再次感谢那些帮助提供答案的人。这是一个我很满意的解决方案。我知道它可能需要一些帮助来重构。如果有人有建议，很想听听！

于 2013-10-08T20:23:13.350 回答