8、视图模型助力动态购物篮实现

视图模型助力动态购物篮实现

在前端开发中，视图模型（View Model）是一个强大的工具，它能帮助我们高效地管理数据和视图之间的交互。下面将详细介绍如何利用视图模型来创建一个动态的购物篮。

1. 双向绑定效果回顾

首先，我们回顾一下双向绑定的效果。在之前的操作中，我们将特价商品元素插入到表单元素之外，这样做是为了避免表单提交时向服务器发送重复的条目。因为特价商品的输入元素与常规商品类别中对应的输入元素具有相同的 name 属性值。

通过扩展视图模型、创建实时绑定和使用模板，我们可以看到显著的效果。例如，对特价商品应用了$3的折扣，只需更改视图模型中价格属性的值，就能确保在文档中正确显示价格。即使价格属性不是可观察的，视图模型和模板的结合也能保证在元素初始生成时显示正确的价格。

双向绑定是这个示例中最有趣和实用的特性。所有输入元素都与它们对应的数量属性进行了双向绑定，对于每个特价奶酪，文档中有两个输入元素，在其中一个输入元素中输入值，会立即在另一个中显示相同的值。

2. 添加动态购物篮

接下来，我们要实现一个动态购物篮，让用户能够方便地管理他们的购物选择。
- 添加小计
- 扩展视图模型 ：为了支持每个商品的小计，我们需要扩展视图模型。以下是具体的代码：

mapProducts(function(item) {
    if ($.inArray(item.id, cheeseModel.specials.ids)