如何構造我的MustacheJS模板，以基於JSON文件中的值添加動態類？

Question

目的
構建一個允許用戶搜索位置的應用程序。

當前狀態
目前列出的位置很少，因此在登陸“經銷商”頁面時只會顯示所有位置。

背景
以前，只有大約50個陳列室提供我們出售的產品，因此可以使用靜態HTML頁面。



並顯示為

但是執行此操作后，頁面大小增加到大約1500行代碼。 我們已經獲得了更多，並且需要可擴展的解決方案，以便我們可以快速添加更多的經銷商。 在其他項目中，我以前使用過MustacheJS並從JSON文件中加載值。 我知道理想情況下這將是AJAX應用程序。 也許我在這里使用數據庫可能會更好？

以下是我到目前為止的構想，它可以在一定程度上“起作用”，但似乎離可以有效擴展的最可持續的解決方案不遠。

HTML

<a id="{{state}}"></a>
      <div>
        <h4>{{dealer}} : {{city}}, {{state}} {{l_type}}</h4>
        <div class="{{icon_class}}">
          <ul>
            <li><i class="icon-map-marker"></i></li>
            <li><i class="icon-phone"></i></li>
            <li><i class="icon-print"></i></li>
          </ul>
        </div>  

        <div class="listingInfo">
          <p>{{street}} <br>{{suite}}<br>
            {{city}}, {{state}} {{zip}}<br>
            Phone: {{phone}}<br>
            {{toll_free}}<br>
            {{fax}}
          </p>
        </div>
      </div>
<hr>  

JSON

{ "dealers" : [
  { 
    "dealer":"Benco Dental",
    "City":"Denver",
    "state":"CO",
    "zip":"80112",
    "l_type":"Showroom",
    "icon_class":"listingIcons_3la",
    "phone":"(303) 790-1421",
    "toll_free":null,
    "fax":"(303) 790-1421"
    },
    {
    "dealer":"Burkhardt Dental Supply",
    "City":"Portland",
    "state":"OR",
    "zip":"97220",
    "l_type":"Showroom",
    "icon_class":"listingIcons",
    "phone":" (503) 252-9777",
    "toll_free":"(800) 367-3030",
    "fax":"(866) 408-3488"  
  }
]}

挑戰

• 包裝ul的CSS類將根據有多少個字段而變化。 在這種情況下，共有3個，因此該類為“ listingIcons_3la”

• 僅當實際上有免費電話號碼時，才會顯示“免費電話”號碼部分。

• 僅當傳真號碼有值時，才顯示傳真號碼。

Answer 1

對於條件，您可以使用

{{#toll_free}}
  {{toll_free}}
{{/toll_free}}

如果內容不是null ， undefined或false ，它將僅顯示標簽之間的內容。 否則，它將完全忽略該內容。

對於列表圖標類，您應該簡化HTML以將li用於圖標和文本。 這樣一來，您就可以將完整的內容包含在Mustache中的條件中，而不必完全使用此類。 一個例子是：

{{#toll_free}}
  <li><i class="icon-phone"></i>{{toll_free}}</li>
{{/toll_free}}

使用CSS，您可以通過填充來獲得與現在相同的外觀。 我做了一個小提琴，大致根據您的示例來顯示此代碼和工作模板代碼： http : //jsfiddle.net/NGwge/

Answer 2

您可能想在http://www.elated.com/res/File/articles/development/easy-html-templates-with-mustache/sections-conditional.html上查看胡須條件（帶有POC）。 這將照顧2和3

使用“ 胡子條件和循環 ”中的“ .length”片段，您應該能夠完成1

1. 包裝ul的CSS類將根據有多少個字段而變化。 在這種情況下，共有3個，因此該類為“ listingIcons_3la”
2. 僅當實際上有免費電話號碼時，才會顯示“免費電話”號碼部分。
3. 僅當傳真號碼有值時，才顯示傳真號碼。