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。それ以外の場合、そのコンテンツは完全に無視されます。

liリスト アイコン クラスの場合、アイコンとテキストの両方に を使用するように HTML を簡素化する必要があります。そうすれば、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 に答える