Knockout.js - 上轉換JSON數據爲HTML

想法，我有一個observableArray self.CustomerOrders我與Knockout.js - 上轉換JSON數據爲HTML

self.CustomerOrders.push(new CustomerOrder(self.getOrderId(), today.toLocaleDateString() , self.selectedCustomer2(), JSON.stringify(self.cart(),null,4)));

其中

self.getOrderId()是一個方法來獲得一個ID爲順序，
today.toLocaleDateString()打印今天的日期，
self.selectedCustomer2是訂單的選定客戶和
self.cart是另一個包含所有有序項目的observableArray。

這是我如何填充self.cart

self.cart.push(new orderedItem(product.id, product.name, product.price, product.quantity()));

這裏是我的foreach

 <tbody data-bind="foreach: CustomerOrders"> 
      <tr> 
       <td data-bind="text: id"></td> 
       <td data-bind="text: date"></td> 
       <td data-bind="text: customer"></td> 
       <td data-bind="text: details"></td> 
       <td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#display-order">View</a> 
       </td> 
       <td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#edit-order">Edit</a> 
       </td> 
       <td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#delete-order">Delete</a> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div>

我在所有這些數據保存到CustomersOrders觀察到的陣列成功，然後我打印出來的我UI使用foreach。我的問題是，self.cart項目打印爲JSON，我不想顯示JSON給用戶，但HTML。

如何實現這個？任何想法？

來源

2014-07-21 Athanasios Emmanouilidis

你的'CustomerOrder'函數是什麼樣的？你在那裏有一個'JSON.stringify'，它將你的'self.cart'對象轉換成一個字符串。這是你的意圖嗎？你是否在某個時候返回JSON.parse？ –

另外，顯示你的HTML綁定。 –

我想你已經誤解了我的問題。我只是想要一種將JSON對象打印爲HTML的方式。如果您不瞭解我的要求，則不需要downvote。謝謝。 –

好的，所以不要JSON.stringify你的cart。然後，假設你Details結合是其中cart部分應該結束了，它應該是一個數組，你可以窩foreach綁定是這樣的：

<td> 
    <ul data-bind="foreach: details"> 
     <li data-bind="text: someProperty"></li> 
    </ul> 
</td>

其中someProperty是車的什麼屬性，你想要顯示。

當然，您可以選擇適合您的要求的任何html元素。

來源

2014-07-21 14:03:21

謝謝。我不知道我可以窩在哪裏。 –

我的問題是，self.cart項目被打印成JSON

嗯，這並不奇怪。

self.CustomerOrders.push(
    new CustomerOrder(
     self.getOrderId(), 
     today.toLocaleDateString(), 
     self.selectedCustomer2(), 
     JSON.stringify(self.cart(),null,4) /* guess what that does */ 
    ) 
);

只是做

self.CustomerOrders.push(
    new CustomerOrder(
     self.getOrderId(), 
     today.toLocaleDateString(), 
     self.selectedCustomer2(), 
     self.cart 
    ) 
);

和使用正淘汰賽綁定在視圖中顯示cart。

來源

2014-07-21 13:29:12 Tomalak

不以這種方式工作。 self.cart不會被foreach打印。 JSON.stringify按預期工作。 –

@AhanasiosEmmanouilidis：你的意思是「按預期工作」是什麼意思？你沒有解釋你爲什麼首先使用'JSON.stringify'。它將你的對象轉換爲一個字符串，你爲什麼要這樣做？如果您想訪問原始對象的屬性，則需要再次使用「JSON.parse」。 –

我只是簡單地使用它，因爲只有這種方法似乎使我的對象的內容被按照foreach打印。 –

Knockout.js - 上轉換JSON數據爲HTML

回答

相關問題