Question

有人能指出一种更易于阅读和扩展的方式：

data = {/*very very long json*/};
var inHTML = "";

jQuery.each(data, function(key, value){
    var articleUrl = 'url-to-somewhere';

    var newItem = "<div class='item'><div class='item--poster'><img src='"+data[key].backdropUrl+"' alt='title'/></div><div class='item--content'><h2>"+data[key].title+"</h2><ul><li>"+data[key].productionYear+"</li><li>"+data[key].productionCountry+"</li></ul></div><div class='item--link'><p><a class='' href='"+articleUrl+"'>Lue lisää</a></p></div></div>";
    inHTML += newItem;  

});

jQuery("#container").html(inHTML);

我正在寻找的是类似于Angular的ng-repeat。

Answer 1

我打赌使用占位符模板和.clone()。你需要做的是，创建一个像这样的Master DOM：

<div id="master-dom" class="item">
  <p><strong>Name</strong> <span class="Name"></span></p>
  <p><strong>Age</strong> <span class="Age"></span></p>
</div>

现在给出一个隐藏Master DOM的CSS：

#master-dom {display: none;}

下一次尝试将是#content区域：

<div id="content"></div>

现在是JavaScript部分。

var data = [
  {
    "name": "Praveen",
    "age": 27
  },
  {
    "name": "Jon Skeet",
    "age": 29
  },
  {
    "name": "Kumar",
    "age": 25
  }
];

将上述内容作为数据结构，您可以循环并插入：

$.each(data, function (i, v) {
  // We need the v.
  $("#master-dom").clone()
                  .removeAttr("id")
                  .find(".Name").text(v.name).end()
                  .find(".Age").text(v.age).end()
                  .appendTo("#content");
});

请在此处查看最终输出：

＆＃13;

$(function() {
  var data = [{
    "name": "Praveen",
    "age": 27
  }, {
    "name": "Jon Skeet",
    "age": 29
  }, {
    "name": "Kumar",
    "age": 25
  }];

  $.each(data, function(i, v) {
    // We need the v.
    $("#master-dom").clone()
      .removeAttr("id")
      .find(".Name").text(v.name).end()
      .find(".Age").text(v.age).end()
      .appendTo("#content");
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#master-dom {
  display: none;
}
.item p strong {
  display: inline-block;
  width: 75px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div id="master-dom" class="item">
  <p><strong>Name</strong> <span class="Name"></span></p>
  <p><strong>Age</strong> <span class="Age"></span></p>
</div>
<div id="content"></div>

＆＃13;

我真的相信这将是Angular＆＃39; ng-repeat背后的基本逻辑。如果我在你的位置，我也会使用上面的逻辑。

Answer 2

您可以使用ES6功能Template literals

你的字符串看起来像这样

var newItem =
    `<div class='item'>
        <div class='item--poster'>
            <img src='${data[key].backdropUrl}' alt='title'/>
        </div>
        <div class='item--content'>
            <h2>${data[key].title}</h2>
            <ul>
                <li>${data[key].productionYear}</li>
                <li>${data[key].productionCountry}</li>
            </ul>
        </div>
        <div class='item--link'>
            <p>
                <a class='' href='${articleUrl}'>Lue lisää</a>
            </p>
        </div>
    </div>`;

JS或jQuery方式动态创建DOM元素

2 个答案: