目标
创建允许用户搜索位置的应用程序。
当前状态
目前列出的地点很少,所以在登陆“经销商”页面时都会显示出来。
背景
以前只有大约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}}
如果标签之间的内容不是
null
、undefined
或false
,则只显示标签之间的内容。否则,它将完全忽略这些内容。对于listing icons类,您应该简化html,以便对图标和文本都使用
li
。这样,您就可以将整个过程用条件语句从胡子中括起来,从而避免完全使用此类类。例如:{{#toll_free}}
<li><i class="icon-phone"></i>{{toll_free}}</li>
{{/toll_free}}
使用CSS,您可以通过一些填充来获得与现在相同的外观。我做了一个小提琴来显示这个和工作模板代码,大致基于您的示例:http://jsfiddle.net/NGwge/