我用KnockoutJS 3.4.2构建了一个购物车页面,我在最新的Chrome中测试了这个页面,购物车中的产品是用 AJAX 加载的。
然后将购物车填充到HTML表中。
由于某种原因,当我在TD中绑定'productTitle'时,它可以工作,但当我试图在span中绑定它时,它不能工作。我还尝试使用模板:<span><!--ko text: productTitle--><!--/ko--></span>
但这也行不通。
这是否与页面加载时observableArray可能仍然为空的事实有关?我发现,当我将“productTitle”放入TD文本绑定时,文本可以工作。
另外,由于某些原因,可观察计数不会绑定到数据绑定值的输入。
下面是我的代码:
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
1条答案
按热度按时间1l5u6lss1#
注意:到这里,这个问题是由第三方库(StackTable)引起的,它增加了KO绑定。
看起来你的代码是剃刀?我注意到
<span></span>
被注解掉了。这是你提到的有问题的span吗?如果是这样的话,我建议将绑定放在
<span>
元素本身上。我不确定文本绑定是否支持虚拟标记的使用。替换:
具有:
此外,作为一种“最佳实践”的方法,我不会将元素单独推入数组。每次推入都会导致knockout重新评估依赖关系,并将/可能导致重绘(即对性能不太好)。相反:
1.构建一个本地普通旧JavaScript数组。
1.把东西放进去。
1.将可观察数组的值设置为刚刚构建的本地数组的值。
我还将对
foreach
进行逻辑检查,以确定该数组不是null/undefined或空的。