使用文本节点将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方法，因为这在处理大量数据时会很麻烦。
回答 2
Stack Overflow用户
发布于 2018-08-13 03:07:57
您可以使用顶级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。
下面是一个示例，它通过允许您实际动态更改数据属性来显示数据绑定：
它还显示了到<img>标记的源和标题属性的数据链接。有关不同数据链接目标的详细信息，请参阅here。
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>
Stack Overflow用户
发布于 2018-08-13 15:12:04
虽然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);
}
});编辑：这种方法的主要缺点是，当以这种方式修改元素属性时，它会解除绑定所有附加的事件。
https://stackoverflow.com/questions/51806942
复制相似问题
腾讯云开发者
