Question

有人可以告诉我如何用.js（model）的HTML视图绑定数据

我有对象数组，并希望将每个对象从数组中绑定到HTML页面中。

这是我要绑定的JSON数据

[{
    actor_1_name: "CCH Pounder",
    actor_2_name: "Joel David Moore",
    budget: "237000000",
    content_rating: "PG-13",
    country: "USA",
    director_name: "James Cameron",
    genres: "Action|Adventure|Fantasy|Sci-Fi",
    language: "English",
    movie_imdb_link: "http://www.imdb.com/title/tt0499549/?ref_=fn_tt_tt_1",
    movie_title: "Avatar ",
    plot_keywords: "avatar|future|marine|native|paraplegic",
    title_year: "2009"
},
{
    actor_1_name: "Johnny Depp",
    actor_2_name: "Orlando Bloom",
    budget: "300000000",
    content_rating: "PG-13",
    country: "USA",
    director_name: "Gore Verbinski",
    genres: "Action|Adventure|Fantasy",
    language: "English",
    movie_imdb_link: "http://www.imdb.com/title/tt0449088/?ref_=fn_tt_tt_1",
    movie_title: "Pirates of the Caribbean: At World's End ",
    plot_keywords: "goddess|marriage ceremony|marriage",
    title_year: "2007"
 }]

我的视图片段如下

     <div>
                <div>
                    <div>
                        <a href="http://www.imdb.com/title/tt0499549/?ref_=fn_tt_tt_1" target="_blank">movie_title</a>
                    </div>
                    <div>
                        content_rating
                    </div>
                </div>
                <div>
                    plot_keywords
                </div>
                <div>
                    <span>title_year</span>
                    <span>language</span>
                    <span>country</span>
                </div>
                <div>
                    <span>Director: </span>director_name
                </div>
                <div>
                    <span>Actor 1:</span> actor_1_name <br>
                    <span>Actor 2:</span> actor_2_name
                </div>
            </div>

我想在迭代中将数据从json对象绑定到div。

仅使用javascript，没有jquery，没有Angular框架。

使用ng-repeat或*ngFor来实现相同的目的。

Answer 1

这将是一种非常基本的方法。您需要确保variable中的模板div#template字符串在模板中仅存在一次（由于简单替换字符串的基本方法）。

let data = [{
  "actor_1_name": "CCH Pounder",
  "actor_2_name": "Joel David Moore",
  "budget": "237000000",
  "content_rating": "PG-13",
  "country": "USA",
  "director_name": "James Cameron",
  "genres": "Action|Adventure|Fantasy|Sci-Fi",
  "language": "English",
  "movie_imdb_link": "http://www.imdb.com/title/tt0499549/?ref_=fn_tt_tt_1",
  "movie_title": "Avatar ",
  "plot_keywords": "avatar|future|marine|native|paraplegic",
  "title_year": "2009"
}, {
  "actor_1_name": "Johnny Depp",
  "actor_2_name": "Orlando Bloom",
  "budget": "300000000",
  "content_rating": "PG-13",
  "country": "USA",
  "director_name": "Gore Verbinski",
  "genres": "Action|Adventure|Fantasy",
  "language": "English",
  "movie_imdb_link": "http://www.imdb.com/title/tt0449088/?ref_=fn_tt_tt_1",
  "movie_title": "Pirates of the Caribbean: At World's End ",
  "plot_keywords": "goddess|marriage ceremony|marriageproposal|pirate|singapore",
  "title_year": "2007"
}]

const tpl = document.getElementById('template');
const content = document.getElementById('content');

for (const item of data) {
  let templateStr = tpl.innerHTML;
  let template = tpl.cloneNode(true);
  for (const prop in item) {
    templateStr = templateStr.replace(prop, item[prop]);
  }
  template.id = '';
  template.removeAttribute('hidden');
  content.appendChild(template);
  template.innerHTML = templateStr;
}

<div id="template" hidden>
<div>
  <div>
    <div>
      <a href="movie_imdb_link" target="_blank">movie_title</a>
    </div>
    <div>
      content_rating
    </div>
  </div>
  <div>
    plot_keywords
  </div>
  <div>
    <span>title_year</span>
    <span>language</span>
    <span>country</span>
  </div>
  <div>
    <span class="name">Director: </span>director_name
  </div>
  <div>
    <span>Actor 1:</span> actor_1_name <br>
    <span>Actor 2:</span> actor_2_name
  </div>
</div>
</div>
<div id="content"></div>

Answer 2

这就是我要做的

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
</body>
</html>

JavaScript

    var my_data = [{
    "actor_1_name": "CCH Pounder",
    "actor_2_name": "Joel David Moore",
    "budget": "237000000",
    "content_rating": "PG-13",
    "country": "USA",
    "director_name": "James Cameron",
    "genres": "Action|Adventure|Fantasy|Sci-Fi",
    "language": "English",
    "movie_imdb_link": "http://www.imdb.com/title/tt0499549/?ref_=fn_tt_tt_1",
    "movie_title": "Avatar ",
    "plot_keywords": "avatar|future|marine|native|paraplegic",
    "title_year": "2009"
   }, 
   {
    "actor_1_name": "Johnny Depp",
    "actor_2_name": "Orlando Bloom",
    "budget": "300000000",
    "content_rating": "PG-13",
    "country": "USA",
    "director_name": "Gore Verbinski",
    "genres": "Action|Adventure|Fantasy",
    "language": "English",
    "movie_imdb_link": "http://www.imdb.com/title/tt0449088/?ref_=fn_tt_tt_1",
    "movie_title": "Pirates of the Caribbean: At World's End ",
    "plot_keywords": "goddess|marriage ceremony|marriage\
    proposal|pirate|singapore",
    "title_year": "2007"
   }];

   var parent = document.querySelector('body');

   Object.keys(my_data).forEach((object) => {
       var divSeperator = document.createElement('div');
       parent.appendChild(divSeperator);
       Object.keys(my_data[object]).forEach((movieKeyElement) => {
         var movieElement = document.createElement('p');
         movieElement.innerHTML = my_data[object][movieKeyElement];

         // Append a classname
         movieElement.classList.add('CLASSNAME');
         // Add a class Attribute and set its value
         movieElement.setAttribute('class', 'CLASSNAME');

         movieElement.setAttribute('contenteditable', 'true');
         movieElement.addEventListener('input', () => {
            my_data[object][movieKeyElement] = movieElement.innerHTML;
         })
         divSeperator.appendChild(movieElement);
       });
   })

这应该创建元素并将其与JSON值一起填充

我还添加了功能，可以基于对元素的编辑来更改JSON值，但这可能是不安全的，我建议至少进行复制并添加验证，尽管这超出了此问题的范围< / p>

如何在纯JavaScript或香草JS中绑定双向数据？

2 个答案: