Question

目的
构建允许用户搜索位置的应用程序。

当前状态
目前列出的位置很少，因此只有在“经销商”页面登陆时才会显示它们。

背景
以前只有大约50个展厅带有我们销售的产品，因此静态HTML页面很好。

example of code

并显示为

displays as

但是这样做后，页面大小增加到大约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

使用Mustache Conditions and Loops中的“.length”文章，您应该能够完成1

包装ul的CSS类将根据字段数而有所不同有。在这种情况下有3个，所以课程是 “listingIcons_3la”
“免费”号码部分只应出现在实际上是一个免费电话号码。
传真号码只应在有传真值时显示号。

如何构建我的MustacheJS模板以根据JSON文件中的值添加动态类？

2 个答案: