javascript - 我如何构造我的 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，您可以通过一些填充实现与现在相同的外观。我做了一个 fiddle 来展示这个和工作模板代码，大致基于你的例子:http://jsfiddle.net/NGwge/