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

Question

我正在嘗試檢索用於構建模板的原始JSON並將其填充到textarea元素中。

JSON的結構是包含三個屬性的JSON對象數組，這三個屬性可以很好地填充我的模板。我無法弄清楚的是如何在每次迭代中採用原始JSON元素並將其顯示在textarea中。

我對這個問題的描述可能有些遲鈍，所以希望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

以上運行時，您可以使用$datacontextual binding屬性表示當前視圖模型和ko.toJSON輔助方法輸出作爲一個字符串：

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

見行動this fiddle.