Question

我还在制作我的食谱应用程序。我正在构建购物清单功能。从食谱页面，您可以点击“添加到杂货店列表”链接，然后您将进入包含该食谱所有成分的页面。

目标是逐个列出成分，每个成分旁边都有一个复选框。当选中此框时，我希望这样的成分能够被打破，鸡蛋。如果未选中此框，我只想将其作为普通文本。这是我需要你帮助的地方。显然我需要一些If语句，但我不确定如何构建具有这些所需元素的语句。

我通过 text_area 设置了成分，因此为了区分成分，您必须使用 each_line 功能。

这是我到目前为止，这是来自 _grocery 部分：

<% @recipe.ingredient.each_line do |line| %>
  <li><%= line %></li>
<% end %>

我没有使用bootstrap，所以我没有关于如何执行复选框和通过进行操作的最模糊的想法复选框已选中。任何人都可以提供的见解将非常感激，如果您需要更多我的代码，请告诉我，我会及时提供。

我对这个问题的深度远不够。

Answer 1

您只能使用CSS管理删除线。但是，要保存项目的状态，最好使用AJAX自动保存表单，否则，您可以添加＆＃34;保存列表＆＃34;按钮，它将在Rails中设置为普通形式。

下面是一个使用CSS在选中框时动态敲击项目的示例，或者在页面加载时选中该框的示例。

＆＃13;

.row input:checked + span {text-decoration: line-through}

＆＃13;

<div class="row"><input type="checkbox"> <span>My item</span></div>
<div class="row"><input type="checkbox"> <span>My item</span></div>
<div class="row"><input type="checkbox"> <span>My item</span></div>
<div class="row"><input type="checkbox"> <span>My item</span></div>
<div class="row"><input type="checkbox"> <span>My item</span></div>

＆＃13;

当您最初加载页面时，您将使用ruby来确定是否应该选中 <（>使用Rails＆＃39;表单帮助程序）。你将让CSS完成其余的工作：）

Answer 2

为了进一步Wes Foster史诗般的CSS回答，我会为你追逐......

你问的是前端样式问题，不是Rails 。

尽管您已经为自己的信息提供了很好的背景信息，但在我看来，您可能会在识别系统应该如何组合的具体方面遇到问题。

我通过text_area
设置了配料

我会提供一些代码（以上是坏动作）。

Wes有答案;这应该可以帮助您提高您的工作效率：

#app/models/ingredient.rb
class Ingredient < ActiveRecord::Base
   has_and_belongs_to_many :recipes
end

# join table - ingredients_recipes - ingredient_id | recipe_id

#app/models/recipe.rb
class Recipe < ActiveRecord::Base
   has_and_belongs_to_many :ingredients
end

您遇到的主要结构问题是您手动添加＆＃34;成分＆＃34;一个食谱。您可以更好地使用many-to-many关系（has_and_belongs_to_many或has_many :through）来关联不同的记录。

简而言之，这将允许您使用以下内容：

@recipe.ingredients.each ...

#app/controllers/recipes_controller.rb
class RecipesController < ApplicationController
   def show
      @recipe = Recipe.find params[:id]
   end
end

#app/views/recipes/show.html.erb
<% @recipe.ingredients.each do |ingredient| %>
    <%= content_tag :li, ingredient, class: "ingredient" %>
<% end %>

#app/assets/stylesheets/application.css
li.ingredient:checked + span {  /* Wes's code */ }

这将为您提供ingredients的{{1}}列表。

如果您想在食谱中添加/删除成分：

recipe

执行此操作将允许您使用以下内容：

#app/models/recipe.rb
class Recipe < ActiveRecord::Base
   has_and_belongs_to_many :ingredients
   accepts_nested_attributes_for :ingredients
end

#app/controllers/recipes_controller.rb
class RecipesController < ApplicationController
   def new
      @recipe = Recipe.new
   end

   def create
      @recipe = Recipe.new recipe_params
      @recipe.save
   end

   def edit
     @recipe = Recipe.find params[:id]
   end

   def update
      @recipe = Recipe.find params[:id]
      @recipe.update recipe_params
   end

   private

   def recipe_params
      params.require(:recipe).permit(:recipe, :params, :ingredients)
   end
end

这样您就可以显示#app/views/recipes/edit.html.erb <%= form_for @recipe, method: :put do |f| %> <%= f.collection_check_boxes :ingredients, @recipe.ingredients, :id, :name %> <%= f.submit %> <% end %>的现有ingredients，并在提交时更新。

Ruby on Rails + HTML + CSS，如果选中，则点击

2 个答案: