如何在带有Liquid模板语言的if语句中使用for循环?

时间:2018-05-24 20:38:27

标签: jekyll liquid

我正试图通过使用液体模板使用Jekyll来使网站的一部分动态化。这是我第一次使用它,所以我不确定它为什么不起作用。我将json文件与液体链接起来。

这是结果必须如下:             

            <p><strong>University Union Neighborhood</strong></p>
            <div class="label_input_grouping">
                <label><input type="checkbox" name="location" value="The Avenue" onclick="document.getElementById('chk1').checked = this.checked;" />The Avenue</label> 
                <label><input type="checkbox" name="location" value="Chick Fil-A" onclick="document.getElementById('chk2').checked = this.checked;" />Chick Fil-A</label> 
                <label><input type="checkbox" name="location" value="805 Kitchen" onclick="document.getElementById('chk3').checked = this.checked;" />805 Kitchen</label> 
                <label><input type="checkbox" name="location" value="805 Cafe" onclick="document.getElementById('chk31').checked = this.checked;" />805 Cafe</label> 
                <label><input type="checkbox" name="location" value="Myron's" onclick="document.getElementById('chk4').checked = this.checked;" />Myron's - NEW THIS FALL</label> 
                <label><input type="checkbox" name="location" value="Lucys" onclick="document.getElementById('chk5').checked = this.checked;" />Lucy's Juice</label> 
                <label><input type="checkbox" name="location" value="Sandwich Factory" onclick="document.getElementById('chk6').checked = this.checked;" />Sandwich Factory</label>
                <label><input type="checkbox" name="location" value="Mustang Station" onclick="document.getElementById('chk7').checked = this.checked;" />Mustang Station</label> 
                <label><input type="checkbox" name="location" value="Red Radish" onclick="document.getElementById('chk8').checked = this.checked;" />Red Radish</label>
                <label><input type="checkbox" name="location" value="Starbucks-UU" onclick="document.getElementById('chk9').checked = this.checked;" />Starbucks University Union</label>
            </div>


            <p><strong>Kennedy Library Neighborhood</strong></p>
            <div class="label_input_grouping">
                <label><input type="checkbox" name="location" value="Campus Market" onclick="document.getElementById('chk10').checked = this.checked;" />Campus Market</label>
                <label><input type="checkbox" name="location" value="Starbucks-CM" onclick="document.getElementById('chk11').checked = this.checked;" />Starbucks Campus Market</label> 
                <label><input type="checkbox" name="location" value="Julians" onclick="document.getElementById('chk12').checked = this.checked;" />Julian's Cafe Bistro in Kennedy Library</label> 
                <label><input type="checkbox" name="location" value="Tacos To-Go Express" onclick="document.getElementById('chk13').checked = this.checked;" />Tacos To-Go Express</label>
            </div>


            <p><strong>Poly Canyon Village Neighborhood</strong></p>
            <div class="label_input_grouping">
                <label><input type="checkbox" name="location" value="Einstein Bros. Bagels" onclick="document.getElementById('chk14').checked = this.checked;" />Einstein Bros. Bagels</label>
                <label><input type="checkbox" name="location" value="Jamba Juice" onclick="document.getElementById('chk15').checked = this.checked;" />Jamba Juice</label>
                <label><input type="checkbox" name="location" value="Tacos To-Go Mexican Grill" onclick="document.getElementById('chk16').checked = this.checked;" />Tacos To-Go Mexican Grill</label> 
                <label><input type="checkbox" name="location" value="Village Market" onclick="document.getElementById('chk17').checked = this.checked;" />Village Market</label> 
            </div>

        </div>


        <div class="options">

            <p><strong>Support Units</strong></p>
            <div class="label_input_grouping">
                <label><input type="checkbox" name="location" value="Catering" onclick="document.getElementById('chk18').checked = this.checked;" />University Catering</label> 
                <label><input type="checkbox" name="location" value="Concessions" onclick="document.getElementById('chk19').checked = this.checked;" />Mustang Concessions</label> 
                <label><input type="checkbox" name="location" value="Curbside" onclick="document.getElementById('chk20').checked = this.checked;" />Curbside Grill Food Truck</label> 
                <label><input type="checkbox" name="location" value="Central Coaster" onclick="document.getElementById('chk21').checked = this.checked;" />Central Coaster Food Truck - NEW THIS FALL</label> 
                <label><input type="checkbox" name="location" value="Starbucks Coffee Truck" onclick="document.getElementById('chk22').checked = this.checked;" />Starbucks Coffee Truck - NEW THIS FALL</label>
            </div>


            <p><strong>Other Food Service Units</strong></p>
            <div class="label_input_grouping">
                <label><input type="checkbox" name="location" value="Bakery" onclick="document.getElementById('chk23').checked = this.checked;" />Bake Shop</label>
                <label><input type="checkbox" name="location" value="Salad Room" onclick="document.getElementById('chk24').checked = this.checked;" />Salad Room (Grab and Go production)</label>
                <label><input type="checkbox" name="location" value="Central Kitchen" onclick="document.getElementById('chk25').checked = this.checked;" />Central Kitchen</label>
                <label><input type="checkbox" name="location" value="Dishwashing" onclick="document.getElementById('chk26').checked = this.checked;" />Dishwashing</label>
                <label><input type="checkbox" name="location" value="Maintenance" onclick="document.getElementById('chk27').checked = this.checked;" />Maintenance</label>
                <label><input type="checkbox" name="location" value="Warehouse" onclick="document.getElementById('chk28').checked = this.checked;" />Warehouse/Delivery</label>
                <label><input type="checkbox" name="location" value="Custodial" onclick="document.getElementById('chk29').checked = this.checked;" />Custodial</label>
                <label><input type="checkbox" name="location" value="Maintenance" onclick="document.getElementById('chk30').checked = this.checked;" />Maintenance</label>
                <label><input type="checkbox" name="location" value="Administration" onclick="document.getElementById('chk31').checked = this.checked;" />Administration/Accounting</label>
            </div>

        </div>
    </div>

这是json文件的一部分:

[
 {
"staffID": "chk1",
"name": "The Avenue",
"email/1": "rvpatter@calpoly.edu",
"email/2": "mvedrin@calpoly.edu",
"email/3": "",
"email/4": "",
"location": "University Union"
},

{
"staffID": "chk10",
"name": "Campus Market",
"email/1": "khamil05@calpoly.edu",
"email/2": "siramire@calpoly.edu",
"email/3": "rmonteat@calpoly.edu",
"email/4": "",
"location": "Kennedy Library Neighborhood"
},

 {
"staffID": "chk14",
"name": "Einstein Bros. Bagels",
"email/1": "brweaver@calpoly.edu",
"email/2": "mburns03@calpoly.edu",
"email/3": "srios@calpoly.edu",
"email/4": "",
"location": "Poly Canyon Village Neighborhood"
},

{
"staffID": "chk18",
"name": "Catering",
"email/1": "elammers@calpoly.edu",
"email/2": "cstocker@calpoly.edu",
"email/3": "rmonteat@calpoly.edu",
"email/4": "",
"location": "Support Units"
},

 {
"staffID": "chk23",
"name": "Bakery",
"email/1": "kcphilli@calpoly.edu",
"email/2": "mdevad@calpoly.edu",
"email/3": "",
"email/4": "",
"location": "Other Food Service Units"
},
]

这是我的流动代码:

          <div class="options">
            {% assign target_restaurants = site.data.apply %}

            {% if restaurant.location == 'University Union' %}
                <p><strong>University Union Neighborhood</strong></p>
                <div class="label_input_grouping">
                    {% for restaurant in target_restaurants %}
                        <label><input type="checkbox" name="location" value="{{ restaurant['name'] }}"  onclick="document.getElementById('{{ restaurant['staffID'] }}').checked = this.checked;">{{ restaurant['name'] }}</label>
                    {% endfor %}
                </div>

            {% elsif restaurant.location == 'Kennedy Library Neighborhood' %}
                <p><strong>Kennedy Library Neighborhood</strong></p>

                <div class="label_input_grouping">
                    {% for restaurant in target_restaurants %}
                        <label><input type="checkbox" name="location" value="{{ restaurant['name'] }}"  onclick="document.getElementById('{{ restaurant['staffID'] }}').checked = this.checked;">{{ restaurant['name'] }}</label>
                    {% endfor %}
                </div>  

            {% elsif restaurant.location == 'Kennedy Library Neighborhood' %}
                <p><strong>Poly Canyon Village Neighborhood</strong></p>                
                {% for restaurant in target_restaurants %}
                <div class="label_input_grouping">
                <label><input type="checkbox" name="location" value="{{ restaurant['name'] }}"  onclick="document.getElementById('{{ restaurant['staffID'] }}').checked = this.checked;">{{ restaurant['name'] }}</label>
                </div>
                {% endfor %}

            {% else %}
            {% endif %}
        </div>

        <div class="options">
            {% assign target_restaurants = site.data.apply %}

            {% if restaurant.location == 'Support Units' %}
                <p><strong>Support Units</strong></p>

                <div class="label_input_grouping">
                    {% for restaurant in target_restaurants %}
                        <label><input type="checkbox" name="location" value="{{ restaurant['name'] }}"  onclick="document.getElementById('{{ restaurant['staffID'] }}').checked = this.checked;">{{ restaurant['name'] }}</label>
                    {% endfor %}
                </div>

            {% elsif restaurant.location == 'Other Food Service Units' %}
                <p><strong>Other Food Service Units</strong></p>

                <div class="label_input_grouping">
                    {% for restaurant in target_restaurants %}
                        <label><input type="checkbox" name="location" value="{{ restaurant['name'] }}"  onclick="document.getElementById('{{ restaurant['staffID'] }}').checked = this.checked;">{{ restaurant['name'] }}</label>
                    {% endfor %}
                </div>  
            {% else %}
            {% endif %}
        </div> 

我的结果在编译时只是空白:

        <div class="options">

        </div>

        <div class="options">

        </div> 

提前致谢。

1 个答案:

答案 0 :(得分:0)

{% if restaurant.location == 'University Union' %}之类的比较中,永远不会设置restaurant变量,也不会达到相等,也不会打印任何代码。

如果您只想输出按地点分组的餐馆列表,您可以这样做:

{% assign groups = site.data.apply | group_by:'location' %}

{% for location in groups %}
<div class="options">
  <p><strong>{{ location.name }}</strong></p>
  <div class="label_input_grouping">
    {% for restaurant in location.items %}
      <label><input type="checkbox" name="location" value="{{ restaurant.name }}" onclick="document.getElementById('{{ restaurant.staffID }}').checked = this.checked;">{{ restaurant.name }}</label>
    {% endfor %}
  </div>
</div>
{% endfor %}

group_by过滤器会将data.apply中的所有记录存储在以下数组中:

[
  {"name"=>"University Union", 
   "items"=>[
       {"staffID"=>"chk1", "name"=>"The Avenue", .... }
   ], 
   "size"=>1
  }, 
  {"name"=>"Kennedy Library Neighborhood",
   "items" => [...]
   ...
]

提示:使用检查过滤器{{ anyVariable | inspect }}查看变量中的内容。适合调试。