JSX:jQueryで実現する再利用可能な符号化構造

This is not the actual JSX, but using this method, we can produce the reusable HTML components.

私は6つのマップ層があります.私は以下のようにJS配列を作りました(この情報を格納するためにデータベースを使用することができました、しかし、データは静的です、私は同様にデータベースにそれらを格納するのを感じませんでした).を返します.
LayerCodeからマップを取得するために使用されますgeoserver
層のタイトルのためにlayer
デフォルトでは、デフォルトのオプションが使用されます.
サムネイルは、層のサムネイルを表示するために使用されます.それはimg フォルダ.
記述はレイヤー記述です

const layers = [
  {
    layerCode: "site2_chm",
    layerTitle: "Canopy Height Model (CHM)",
    checked: "checked",
    thumbnail: "./img/florida_chm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "site2_dtm",
    layerTitle: "Digital Terrain Models (DTM)",
    checked: "checked",
    thumbnail: "./img/florida_dtm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },

  {
    layerCode: "final_CHM_merged_dem_p082020_shifted",
    layerTitle: "CHM merged DEM",
    checked: "false",
    thumbnail: "./img/chm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "final_DSM_25cm_vDEM_p082020_shifted",
    layerTitle: "DSM 25 cm vDEM",
    checked: "false",
    thumbnail: "./img/vdem.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "final_DSM_25cm_vGrid_p082020_shifted",
    layerTitle: "DSM 25cm vGrid",
    checked: "false",
    thumbnail: "./img/vgrid.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
  {
    layerCode: "DEM_input_lowest_selected_p082020_shifted",
    layerTitle: "DEM input lowest selected",
    checked: "false",
    thumbnail: "./img/florida_dtm.PNG",
    description:
      "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima nobis soluta molestiae asperiores quae! Veritatis",
  },
];

私はJSXのような構造を生成するための関数を書きました😜). この関数は、上記の配列オブジェクトから引数として引数をとります.

// Layer card generator function 
const layerCardGenerator = (
  layerCode,
  checked,
  thumbnail,
  layerTitle,
  description
) =>
  `<div class="card-body layer-card">
    <div class="row">
      <div class="col-4 thumbnails">
        <img src=${thumbnail} alt="" class="img-fluid" />
      </div>
      <div class="col-8">
        <div style="display: flex; justify-content: space-between">
          <span class="d-block layer-title mt-2">${layerTitle}</span>
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input layer-card-cb" name="${layerTitle}" id=${layerCode} ${checked} />
            <label class="custom-control-label" for=${layerCode}></label>
          </div>
        </div>
        <div class="description">${description}</div>
      </div>
    </div>
    <div style="display: flex">
      <label for="opacity">
        <b class="mr-5 mt-2">Opacity: </b>
      </label>
      <input
        type="range"
        class="form-control-range opacity"
        code=${layerCode}
        value="60"
        min="0"
        max="100"
        data-toggle="tooltip" 
        title="Opacity: 60%"
      />
    </div>
  </div>`;

今、私はlayerCardGenerator 関数を使用するlayer 配列.私はすべての生成された層カードを.left-sidebar セクション.

layer.map((l) => {
    $(".left-sidebar").append(
      layerCardGenerator(
        l.layerCode,
        l.checked,
        l.thumbnail,
        l.layerTitle,
        l.description
      )
    );
  });

最後に、jQuery上で再利用可能なコンポーネントが正常に実装されて😍.

Reference

この問題について(JSX:jQueryで実現する再利用可能な符号化構造), 我々は、より多くの情報をここで見つけました https://dev.to/iamtekson/jsx-reusable-coding-structure-implementing-in-jquery-without-using-react-4o44

---

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol