KnockoutJS的购物车逻辑(?)问题

目标

制作一个产品的动态列表。

场景

我有一个产品购物应用程序。当我点击产品的add button时，我想在侧边栏中显示我添加的产品。

摘要问题（您只需要阅读此内容）

我的ProductsSummary/Index.cshtml中有以下代码（使用Razor引擎）：

<ul class="summary">
    @if (Session["ProductsSummary"] == null)
    {
        <li class="is-empty">
            <p>Your summary is empty.</p>
        </li>
        <li data-bind="attr: { 'data-product-id': id }">
            <div class="product-summary-actions float-right">
                <button class="btn btn-danger btn-mini remove-item">
                    <i class="icon-remove"></i>
                </button>
            </div>
            <div class="product-summary-quantity">
                <h6 data-bind="text: infoComposition"></h6>
            </div>
            <div class="product-summary-description">
                <p data-bind="text: name"></p>
            </div>
        </li>
    }
    else
    {
        foreach 
          (var product in 
             (List<MyApp.Models.Data.getSpecificProductToShoppingList_Result>)
                Session["ProductsSummary"])
        {
        <!-- ko foreach: products -->
        <li data-product-id="@product.id">
            <div class="product-summary-actions float-right">
                <button class="btn btn-danger btn-mini remove-item">
                    <i class="icon-remove"></i>
                </button>
            </div>
            <div class="product-summary-quantity">
                <h6>
                   @product.quantity 
                   @product.measure@(@product.quantity == 1 ? "" : "s")
                </h6>
            </div>
            <div class="product-summary-description">
                <p>@product.name</p>
            </div>
        </li>
        <!-- /ko -->
        }
    }
</ul>

正如您所看到的，代码上有三个<li>。第一种是显示一条消息，如果会话为空（当然，如果添加了任何产品，会话为空），则显示"摘要为空"；第二个CCD_ 4在会话为空时添加内容时用作Knockout的模型；最后一个是显示会话中的产品。

我觉得这里有点"干燥"。无论会话是否存在，我如何重用同一个模板？

详细问题

我的ProductsSummary/Index.cshtml中有以下代码（使用Razor引擎）：

<ul class="summary">
    @if (Session["ProductsSummary"] == null)
    {
        <li class="is-empty">
            <p>Your summary is empty.</p>
        </li>
        <li data-bind="attr: { 'data-product-id': id }">
            <div class="product-summary-actions float-right">
                <button class="btn btn-danger btn-mini">
                    <i class="icon-remove"></i>
                </button>
            </div>
            <div class="product-summary-quantity">
                <h6 data-bind="text: infoComposition"></h6>
            </div>
            <div class="product-summary-description">
                <p data-bind="text: name"></p>
            </div>
        </li>
    }
    else
    {
        foreach 
          (var product in 
             (List<MyApp.Models.Data.getSpecificProductToShoppingList_Result>)
                Session["ProductsSummary"])
        {
        <!-- ko foreach: products -->
        <li data-product-id="@product.id">
            <div class="product-summary-actions float-right">
                <button class="btn btn-danger btn-mini remove-item">
                    <i class="icon-remove"></i>
                </button>
            </div>
            <div class="product-summary-quantity">
                <h6>
                   @product.quantity 
                   @product.measure@(@product.quantity == 1 ? "" : "s")
                </h6>
            </div>
            <div class="product-summary-description">
                <p>@product.name</p>
            </div>
        </li>
        <!-- ko -->
        }
    }
</ul>

如您所见，有一个if用于检查ProductsSummary会话是否存在。如果是，那么应用程序会在屏幕上显示我在摘要中添加的产品列表。

如果会话为null，如您所见，应用程序将在li和is-empty类中显示消息。

重点是：我真的需要<li class="is-empty">[...]</li>之后的"模板"来显示添加到摘要中的项目吗？

我的意思是，我知道无论是否有会话，当我单击"添加产品"按钮时，Knockout都需要显示一些内容，但我出于类似的目的重复了相同的模板。

看看这个片段：

<li data-product-id="@product.id">
    <div class="product-summary-actions float-right">
        <button class="btn btn-danger btn-mini remove-item">
            <i class="icon-remove"></i>
        </button>
    </div>
    <div class="product-summary-quantity">
        <h6>
           @product.quantity 
           @product.measure@(@product.quantity == 1 ? "" : "s")
        </h6>
    </div>
    <div class="product-summary-description">
        <p>@product.name</p>
    </div>
</li>

在这种情况下，我在foreach中使用它，因为我必须显示从数据库中提取的项目。

另一方面，如果没有会话，则存在以下片段：

<li data-bind="attr: { 'data-product-id': id }">
    <div class="product-summary-actions float-right">
        <button class="btn btn-danger btn-mini">
            <i class="icon-remove"></i>
        </button>
    </div>
    <div class="product-summary-quantity">
        <h6 data-bind="text: infoComposition"></h6>
    </div>
    <div class="product-summary-description">
        <p data-bind="text: name"></p>
    </div>
</li>

正如您所看到的，这两个片段是相似的——一个代表数据库中的数据，另一个代表在没有会话时使用Knockout的模型——我需要一种方法来"模板化"这一点。

我真正需要的

1. 有人进入我的网站/应用程序
2. 在我布局的右侧有一个侧边栏，上面有一条消息："摘要为空。"
3. "哦，多么好的产品！我会把它添加到我的摘要中！"，然后用户点击Add按钮，"摘要为空。"消息消失，用户添加的产品以列表中项目的格式出现（与我之前传递的模板相同[第一/第二片段]）
4. "好的，我现在转到另一个类别的产品。"--*用户点击"电视"类别*--"天哪！看看这台电视！我现在就添加到我的摘要中！"--*该用户点击随机电视的"添加按钮"。*--列表中已经有一个产品，但出现了另一个（电视）
5. "哦，没关系。我没有钱。我会从我的摘要中删除这些项目。"--*用户点击摘要上每个产品的"删除按钮"*--如果没有产品，摘要会显示："摘要是空的。"就像魔术一样，没有任何刷新或类似的东西

（有趣，是吗？）

KnockoutJS脚本

$(document).ready(function () {
    function Product(id, name, measure, quantity) {
        this.id = ko.observable(id);
        this.name = ko.observable(name);
        this.measure = ko.computed(function () {
            return quantity > 1 ? measure + "s" : measure;
        }, this);
        this.quantity = ko.observable(quantity);
        this.infoComposition = ko.computed(function () {
            return this.quantity() + " " + this.measure()
        }, this);
    }
    function SummaryViewModel() {
        this.products = ko.observableArray([]);
        this.addToSummary = function (formElement) {
            var $productId = $(formElement).children("[name=productId]").val();
            var match = $(".summary")
                           .find("li[data-product-id=" + $productId + "]").length;
            if (!match) {
                var $productName = 
                        $(formElement).children("[name=productName]").val(),
                    $productMeasure = 
                        $(formElement).children("[name=productMeasure]").val(),
                    $productQuantity = 
                        $(formElement).children("[name=productQuantity]").val();
                this.products.push
                   (new Product
                       ($productId, 
                        $productName, 
                        $productMeasure, 
                        $productQuantity));
                $.ajax({
                    type: "POST",
                    url: "/ProductsSummary/Add",
                    data: 
                       { 
                         productId: $productId, 
                         productQuantity: $productQuantity 
                       }
                });
            }
        }
    };
    var summaryViewModel = new SummaryViewModel();
    ko.applyBindings(summaryViewModel);
    $("body").on("click", ".remove-item", function () {
        summaryViewModel.products.remove(ko.dataFor(this));
        $.ajax({
            type: "POST",
            url: "/ProductsSummary/Remove",
            data: { productId: $(this).closest("li").data("product-id") }
        });
    });
});

最终会发生什么

我所做的工作有效，也无效。从技术上讲，我的代码是有效的，但我不会重复。这可能吗？

技术细节

服务器端团队使用C#.NET和MVC 4和Razor Engine，客户端团队使用KnockoutJS和jQuery。

<li class="is-empty" data-bind="visible: products().length < 1">
    <p>Your summary is empty.</p>
</li>

     <!-- ko foreach: products -->
     <li data-bind="attr: { 'data-product-id': id }">
        <div class="product-summary-actions float-right">
            <button class="btn btn-danger btn-mini remove-item">
                <i class="icon-remove"></i>
            </button>
        </div>
        <div class="product-summary-quantity">
            <h6 data-bind="text: infoComposition"></h6>
        </div>
        <div class="product-summary-description">
            <p data-bind="text: name"></p>
        </div>
    </li>
    <!-- /ko -->

var existingItems = @Html.Raw(Json.Encode((List<MyApp.Models.Data.getSpecificProductToShoppingList_Result>)Session["ProductsSummary"]));
$(document).ready(function() {
    // push existingItems into products observable.
});