使用文本节点将 JSON 数据呈现到就绪的 HTML 页面

Question

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

<!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 数据显示到已定义 "data positions" 的就绪 HTML 页面（如上）？作为挑战的一部分，应避免使用 $('.notifications').html() 相关方法，因为这在处理大量数据时会很麻烦。

Answer 1

您可以使用顶级 JsViews top-level data-linking - 每个插入点都有一个元素，例如 <span>。

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

代码：

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

此外，数据绑定到 HTML。

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

它还显示数据-linking 到 <img> 标签的 src 和 title 属性。有关不同数据的更多信息，请参阅 here-link 目标。

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>

Answer 2

虽然 BorisMoore 的回答充分解决了这个问题，但我制作了一个 "hack"，它似乎也可以支持几乎所有元素的属性，但我不知道它在多大程度上是可靠的。

但是，这需要更改数据结构以指示元素的类型，甚至是其中要插入数据的部分（属性）。数据需要如下所示：

 {"notifications": "span:|3", "something_else": "span:|some arbitrary data", "avatar":"img.alt:|A"}

然后在 JQuery 中，可以这样做：

$.each(data, function(key, value) {
    value = value.split(":|");
    var element = value[0];
    value = value[1];
    if(element.indexOf('.') == -1){
        var content = $(element + ':contains("{{:'+key+'}}")').last().html().replace("{{:"+key+"}}", value);
        $(element + ':contains("{{:'+key+'}}")').html(content);
    }else{
        element = element.split('.');
        var attribute = element[1];
        element = element[0];
        $(element + '['+attribute+'="{{:'+key+'}}"]').last().attr(attribute, value);
    }
});

编辑：此方法的主要缺点是当元素属性以这种方式修改时，它会取消绑定所有附加事件。

使用文本节点将 JSON 数据呈现到就绪的 HTML 页面

Using text-nodes to render JSON data into ready HTML page

javascript

jquery

jsrender

jsviews