使用 Knockout.js 在 HTML 元素中嵌入 JSON 元素答案

【问题标题】：Embed JSON element in HTML element using Knockout.js使用 Knockout.js 在 HTML 元素中嵌入 JSON 元素
【发布时间】：2012-11-24 04:26:19
【问题描述】：

我正在尝试检索用于构造模板的原始 JSON 并将其填充到 textarea 元素中。

JSON 的结构是一个 JSON 对象数组，其中包含三个属性，可以很好地填写我的模板。我想不通的是如何在每次迭代中获取原始 JSON 元素并将其显示在文本区域中。

我对这个问题的描述可能有点迟钝，所以希望 JSFiddle 示例能更好地描述这一点。

Javascript

function MyViewModel() {
    this.model = [{
        "Key": "c1243328-4796-46c0-bb32-017d5a1ebdd4",
        "UserId": "02ad61b1-d416-46d4-98ac-d5f6c2b7d104",
        "Name": "\"old.txt\""},
    {
        "Key": "265c23ea-2d2a-459e-9f51-32837e058d01",
        "UserId": "02ad61b1-d416-46d4-98ac-d5f6c2b7d104",
        "Name": "\"sample.dwg\""}];
};

ko.applyBindings(new MyViewModel());

HTML 模板

<div data-bind="template: { name: 'template', foreach: model}"></div>

<script type="text/html" id="template">
    <p>
        <span data-bind="text: Key"></span>
        <span data-bind="text: UserId"></span>
        <span data-bind="text: Name"></span>
    </p>
    <p><textarea data-bind="text: ???"/></p>
</script>

我想在 textarea 中查看实际的 JSON 元素，但我不确定完成此操作需要什么。

以上运行在jsFiddle

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可以使用代表当前视图模型的$data contextual binding 属性和ko.toJSON 辅助方法将其输出为字符串：

<textarea data-bind="text: ko.toJSON($data)"/>

在this fiddle.查看实际操作

【讨论】：