时间戳

首页 > 解决方案 > 如何在纯 javascript 或 vanilla js 中绑定双向数据？

javascript - 如何在纯 javascript 或 vanilla js 中绑定双向数据？

问题描述

有人能告诉我如何将数据与 .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以角度来实现相同的目标。

标签： javascript

解决方案

这将是一种非常基本的方法。您需要确保模板中的模板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>

推荐阅读