Question

我有一个observableArray self.CustomerOrders，我填充

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可观察数组，然后使用foreach在我的UI中打印它们。我的问题是self.cart项目打印为JSON，我不想向用户显示JSON而是HTML。

如何实现？有什么想法吗？

Answer 1

好的，所以不要JSON.stringify你的cart。然后，假设你的Details绑定是cart部分应该结束的地方，并且它应该是一个数组，你可以像这样嵌套foreach绑定：

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

其中someProperty是您要显示的购物车的任何属性。

当然，您可以选择适合您要求的任何HTML元素。

Answer 2

我的问题是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。

Knockout.js - 关于将JSON数据转换为HTML的想法

2 个答案: