购物车逻辑(?)与KnockoutJS有关

时间:2013-06-25 18:21:00

标签: c# javascript asp.net-mvc-4 razor knockout.js

目标

制作动态产品清单。

情景

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

汇总问题(您只需阅读此内容)

我的ProductsSummary/Index.cshtml(使用Razor Engine)中包含以下代码:

<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>。第一种是显示“摘要为空”的消息。如果会话为空(当然,在添加任何产品的情况下,会话为空);当我在会话为空时添加一些内容时,第二个li作为Knockout的模型;最后一个是显示会话中的产品。

我在这里感觉有点DRY。无论会话是否存在,我如何重用相同的模板?

详细问题

我的ProductsSummary/Index.cshtml(使用Razor Engine)中包含以下代码:

<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会话是否存在。如果是,则应用程序在屏幕上显示我在摘要中添加的产品列表。

会话为空,如您所见,应用程序在li is-empty类中显示消息。

重点是:{strong> 需要<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. 在我的布局的右侧有一个侧边栏,上面有一条消息:“摘要为空。”;
  4.   
  5. “哦,这是一个很好的产品!我会将它添加到我的摘要中!”,然后用户点击Add按钮,“摘要为空”。消息消失,用户添加的产品以列表中的项目格式显示(我在[第一个/第二个片段]之前传递的模板)。
  6.   
  7. “好的,我现在将推出另一类产品。” - *用户点击“电视”类别* - “哦我的上帝!看看这台电视!我现在将添加到我的摘要中!” - *用户点击随机电视的“添加按钮”。* - 列表中已有产品,但另一个(电视)出现。
  8.   
  9. “哦,没关系。我没有钱。我会从我的摘要中删除这些项目。” - *用户单击摘要上每个产品的“删除按钮”* - 如果没有产品,摘要将显示:“摘要为空”。就像一个魔法,没有任何刷新或类似的东西。
  10.   

(搞笑,嗯?)

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

1 个答案:

答案 0 :(得分:1)

对于空车信息,您可以执行以下操作:

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

对于其他人,你应该能够做到这一点(没有MVC循环):

     <!-- 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 -->

并在客户端填充列表,即使您已将项目保存到会话中。在您的视图中,将现有数据序列化为JSON对象并将其保存到页面上的javascript变量,该变量可以在文档就绪时读取并推送到可观察的产品中。

var existingItems = @Html.Raw(Json.Encode((List<MyApp.Models.Data.getSpecificProductToShoppingList_Result>)Session["ProductsSummary"]));

$(document).ready(function() {
    // push existingItems into products observable.
});

请注意,我的语法在JSON编码上可能不太正确。