knockout.js - 使用 Knockout.js 在 HTML 元素中嵌入 JSON 元素

Question

我正在尝试检索用于构建模板的原始 JSON，并将其填充到文本区域元素中。

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>​

我想在文本区域中看到实际的 JSON 元素，但我不确定完成此操作需要什么。

以上运行在jsFiddle

Answer 1

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

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

请参阅 this fiddle. 中的实际操作