2

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

当前状态
目前列出的位置很少，所以它们只是在登陆“经销商”页面时全部呈现。

背景
以前，我们销售的产品只有大约 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"  
  }
]}


挑战

  • 包装的 CSS 类ul将根据字段的数量而有所不同。在这种情况下有 3 个，所以类是“listingIcons_3la”

  • “免费”号码部分仅在事实上有免费号码时才应显示。

  • 传真号码只有在有传真号码值时才会显示。

4

2 回答 2

2

对于条件，您可以使用

{{#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/

于 2013-07-02T23:02:03.867 回答
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

  1. 包装 ul 的 CSS 类将根据字段的数量而有所不同。在这种情况下有 3 个，所以类是“listingIcons_3la”
  2. “免费”号码部分仅在事实上有免费号码时才应显示。
  3. 传真号码只有在有传真号码值时才会显示。
于 2013-07-02T23:03:33.793 回答