时间戳

首页 > 解决方案 > 使用文本节点将 JSON 数据呈现到准备好的 HTML 页面中

javascript - 使用文本节点将 JSON 数据呈现到准备好的 HTML 页面中

问题描述

我正在尝试实现类似于 JSRender 所做的事情，但我不确定如何去做。考虑下面的 HTML“模板”：

<!DOCTYPE html>
    <body>
        <div class="content">
            <div class="notifications">{{:notifications}} notifications</div>
            <div class="something else">this is {{:something_else}} to show</div>
        </div>
    </body>
</html>

假设我有这样的 JSON 数据：

{"notifications": "3", "something_else": "some arbitrary data"}

如何将此数据填充到 HTML 页面中？JSRender 的做法似乎涉及在<script>标签中创建一个单独的模板，然后将数据填充到模板中，最后将模板复制到一个空容器中。有没有办法避免这种模板重新定义？我相信我的 HTML 页面已经可以像上面演示的那样充当模板。

问题：是否可以将 JSON 数据显示到具有定义的“数据位置”的现成 HTML 页面（例如上面）中？作为挑战的一部分，$('.notifications').html()应该避免使用 -related 方法，因为这在处理大量数据时会很麻烦。

标签： javascriptjqueryjsrenderjsviews

解决方案

您可以使用顶级 JsViews顶级数据链接来做到这一点- 每个插入点都有一个元素，例如 a <span>。

<div class="content">
  <div >this is <span data-link="something_else></span> to show</div>
  ...

代码：

$.link(true, ".content", data);

此外，数据是数据绑定到 HTML 的。

这是一个示例，它通过让您实际动态更改数据属性来显示数据绑定：

它还显示了到<img>标签的 src 和 title 属性的数据链接。有关不同数据链路目标的更多信息，请参见此处 。

var data = {notifications: "3", something_else: "some arbitrary data",
  imgData: {img1: {src: "http://www.jsviews.com//icons/android-chrome-36x36.png",
  desc: "some image"}}};

$.link(true, ".content", data, {replace: true});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.js"></script>

<div class="content">
  <div ><span data-link="notifications"></span> notifications</div>
  <div >this is <span data-link="something_else"></span> to show</div>
  <img data-link="src{:imgData.img1.src} title{:imgData.img1.desc}"/>

  <br/>Edit: <input data-link="something_else"/>
</div>

推荐阅读