目标
创建允许用户搜索位置的应用程序。
当前状态
目前列出的地点很少,所以在登陆“经销商”页面时都会显示出来。
背景
以前只有大约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”
只有在事实上有免费电话号码的情况下,“免费”号码部分才应该出现。
只有当传真号码有值时,才会显示传真号码。

最佳答案

对于条件句,可以使用

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

如果标签之间的内容不是nullundefinedfalse,则只显示标签之间的内容。否则,它将完全忽略这些内容。
对于listing icons类,您应该简化html,以便对图标和文本都使用li。这样,您就可以将整个过程用条件语句从胡子中括起来,从而避免完全使用此类类。例如:
{{#toll_free}}
  <li><i class="icon-phone"></i>{{toll_free}}</li>
{{/toll_free}}

使用CSS,您可以通过一些填充来获得与现在相同的外观。我做了一个小提琴来显示这个和工作模板代码,大致基于您的示例:http://jsfiddle.net/NGwge/

10-05 21:02
查看更多