javascript - 在 Javascript/jQuery 中添加带有变量的大块 HTML

Question

我有一个 for 循环，它迭代一些 JSON 数据，对于每个 JSON 对象，我需要输出一大块 HTML，如下所示:

<div class="hotel-result independent">
  <div class="col-xs-12 col-sm-12 col-md-8">
    <div class="hotel-type"><span class="independent">Independent Garage</span></div>
    <h3>Hotel Name</h3>
    <div class="meta-info">
      <span class="distance">
        <i class="fonticon-map-marker"></i>
        1.6 miles from N1 2NL
      </span>
      <span class="telephone hidden-xs">
        <i class="fonticon-telephone2"></i>
        92358023523
      </span>
    </div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4">
    <div class="service">Room</div>
      <div class="price-wrap">
        <span class="currency">£</span>
        <span class="price">30.95</span>
        <span class="vat small">inc VAT</span>
      </div>
      <a class="button teal has-icon-right" href="#">
        Book online
        <i class="fonticon-chevron-right"></i>
      </a>
      <a href="" class="button light-grey has-icon-right phone-booking hidden-sm hidden-md hidden-lg">
        Touch to call
        <i class="fonticon-telephone2"></i>
      </a>
    </div>
  </div>
</div>

酒店名称、距离、邮政编码等元素需要从 JSON 数据中输出。

我正在尝试找出最好的方法来做到这一点，因为用纯 javascript、document.createElement/appendChild 等编写它，看起来很冗长，我想知道是否有更好/更干净的方法？

我在网上找到了其他示例，但仅限于 HTML 量非常小的情况，或者不需要将数据传递到输出的 HTML 中。任何建议将不胜感激。

-------- JSON 数据示例 --------

[{
  id: 0
  name: Hotel Name
  postcode: N1 2NL
  lat: latitude
  lng: Longitude
  hotel_type: independent 
  room_prices: [
    { id:35235325
      room_type: king
      room_price: 356.0
    }
    { id:23532523
      room_type: single
      room_price: 50.0
    }
  ]
}]

这只是 JSON 类型的一个简单示例。

Answer 1

model 是你解析后的 json 数组

var pattern, nodes = $();
for(var i=0,size=model.length; i<size; i++){
  pattern = createHotelPattern(model[i]);
  nodes = nodes.add($(pattern));
};

$('#myNodeSelector').append(nodes);

这是模式创建者:

  function createHotelPattern (data) {
    var pattern = [
      '<div class="hotel-result ',
      data.hotel_type,
      '">',
        '<div class="col-xs-12 col-sm-12 col-md-8">',
          '<div class="hotel-type">',
            '<span class="independent">Independent Garage</span>',
          '</div>',
          '<h3>',
            data.name,
          '</h3>',
          '<div class="meta-info">',
            '<span class="distance"> <i class="fonticon-map-marker"></i>',
              '1.6 miles from ', 
              data.postcode,
             '</span>',
            '<span class="telephone hidden-xs"> <i class="fonticon-telephone2"></i>',
              data.phone,
            '</span>',
          '</div>',
        '</div>',
        '<div class="col-xs-12 col-sm-12 col-md-4">',
          '<div class="service">',
            data.currency,
          '</div>',
          '<div class="price-wrap">',
            '<span class="currency">',
              data.room_type,
            '</span>',
            '<span class="price">',
              data.room_price,
            '</span>',
            '<span class="vat small">',
              'inc VAT',
             '</span>',
          '</div>',
          '<a class="button teal has-icon-right" href="#">',
            'Book online',
            '<i class="fonticon-chevron-right"></i>',
          '</a>',
          '<a href="" class="button light-grey has-icon-right phone-booking hidden-sm hidden-md hidden-lg">Touch to call<i class="fonticon-telephone2"></i></a>',
        '</div>',
      '</div>'
    ];

    return pattern.join('');
  }