Question

所以过去几天我一直在讨论这个问题。它使我感到沮丧，并且由于某些原因我无法使其发挥作用。

这是事情：我有一个购物车页面，我正在使用KnockoutJS 3.4.2构建。我在最新的Chrome中测试了这个。购物车中的产品由Ajax加载。

然后将购物车填入HTML表格。

由于某些原因，我绑定了＆＃39; productTitle＆＃39;在TD它的工作原理，但当我试图绑定它跨越它不会。我也尝试过使用模板：＆＃39;＆＃39;但这也没有奏效。

是否与加载页面时observableArray仍然为空的事实有关？我发现，当我把产品标题＆＃39;在TD文本中绑定文本作品...

由于某种原因，可观察计数不会绑定到数据绑定值的输入。也许我的viewModel的构造方式是错误的？

在下面找到我的代码，希望有人可以提供帮助。提前谢谢。

乐华

HTML

<tbody data-bind="foreach: productsInCart">
                <tr data-bind="attr: {productOptionId: productOptionId}">
                    <td></td>
                    <td class="cart-title" data-bind="text: productTitle"></td>
                    <td data-bind="text: price"></td>
                    <td>
                        @*<span><!--ko text: productTitle--><!--/ko--></span>*@
                            <div click-action="" class="qtyminus"></div>
                            <input type='text' name="quantity" data-bind="value: count" class="qty"/>
                            <div click-action="" class="qtyplus"></div>                        
                    </td>
                    <td class="cart-total" data-bind="text: total"></td>@*
                    <td><a href="@Url.Action("RemoveProductOption", "ShoppingCart", new {id = product.ProductOptionId})" class="cart-remove"></a></td>*@
                </tr>
            </tbody>

JS

$(function () {  
    var productInCart = function(data) {
        var self = this;

        self.productOptionId = ko.observable(data.ProductOptionId);
        self.price = ko.observable(data.Price);
        self.count = ko.observable(data.Count);
        self.productBrandName = ko.observable(data.ProductBrandName);
        self.productOptionName = ko.observable(data.ProductOptionName);
        self.productName = ko.observable(data.ProductName);
        self.productFriendlyUrl = ko.observable(data.ProductFriendlyUrl);

        self.productTitle = ko.computed(function () {
            return self.productName() + " " + self.productOptionName();
        });

        self.total = ko.computed(function () {
            return self.count() * self.price();
        }, self);

        return self;
    }

    function viewModel() {
        var self = this;

        self.productsInCart = ko.observableArray([]);

        $.ajax({
            type: "GET",
            url: window.cartUrl,
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            traditional: true, //// traditional option to true
            success: function (result) {
                console.log(result);
                ko.utils.arrayForEach(result, function (data) {
                    self.productsInCart.push(new productInCart(data));
                });
                console.log(self.productsInCart());
            }
        });
    }

    var vm = new viewModel();
    ko.applyBindings(vm);
});

AJAX加载的对象：

[
{
ShoppingSessionId: 2061,
ProductOptionId: 3,
Price: 26.95,
Count: 1,
ProductBrandName: "G-Star",
ProductOptionName: "Maat 36/36",
ProductName: "G-Star Loose, 340166",
ProductFriendlyUrl: "g-star-3301-loose-dus",
TaxId: 1,
TaxRate: 21,
FirstProductImageId: 7,
Id: 48
}
]

其中一个无法绑定错误：

Uncaught ReferenceError: Unable to process binding "value: function (){return count }"
Message: count is not defined
    at value (eval at parseBindingsString (knockout-3.4.2.js:280), <anonymous>:3:58)
    at m (knockout-3.4.2.js:470)
    at Function.Uc (knockout-3.4.2.js:204)
    at Function.Vc (knockout-3.4.2.js:201)
    at Function.U (knockout-3.4.2.js:200)
    at Object.a.m.a.B (knockout-3.4.2.js:193)
    at init (knockout-3.4.2.js:472)
    at knockout-3.4.2.js:309
    at Object.w (knockout-3.4.2.js:149)
    at knockout-3.4.2.js:308

Answer 1

注意：到此为止，问题是由第三方库（StackTable）引起的，该库增加了KO绑定。

看起来你的代码是剃须刀？我注意到<span></span>被注释掉了。这是你提到的问题吗？

如果是这样，我建议将绑定放在<span>元素本身上。我不确定文本绑定是否支持使用虚拟标记。

替换：

<span><!--ko text: productTitle--><!--/ko--></span>

使用：

<span data-bind="text: productTitle"></span>

此外，作为＆＃34;最佳实践的一种手段＆＃34;我不会将元素单独推入数组中。每次推送都会导致敲除重新唤起依赖关系，并且/可能会导致重绘（即性能不佳）。代替：

构建一个本地普通的旧JavaScript数组。
将物品推入其中。
将可观察数组的值设置为您刚刚构建的本地数组的值。

我还会将foreach包装在逻辑检查中，以确定该数组不是null / undefined或为空。防止任何潜在的绑定错误。

无法让我的淘汰赛正确绑定

1 个答案: