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

Question

我正在尝试检索用于构造模板的原始 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

Answer 1

You can use the $data contextual binding property which represents the current viewmodel and the ko.toJSON helper method to output it as a string:

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

See in action in this fiddle.