作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 KnockoutJS 的新手,所以这可能不是最有建设性的问题,但我似乎无法自己解决这个问题。
如何在可观察对象前添加 $ 符号?我已经尝试了一个计算的可观察对象,但由于我的数据是从服务器中提取的,所以无法让它工作
$(document).ready(function () {
$(function () {
function viewModel(cartData) {
var self = this;
self.cartItems = ko.observableArray([]);
self.discountPercent = ko.observable();
self.grandTotal = ko.observable();
////////////////////////////////////////////////////////////////////////////////////////////////////////
self.removeCartItem = function (CartItem) {
$.ajax({
url: '@Url.Action("RemoveFromCart", "ShoppingCart", null)',
type: 'POST',
data: { 'ID': CartItem.cartItemID },
success: function (data) {
self.cartItems.remove(CartItem);
self.getCartTotal();
}
});
};
//////////////////////////////////////////////////////////////////////////////////////////////////////
self.getCartTotal = function () {
$.getJSON('@Url.Action("koGetTotal","ShoppingCart",null)', function (data) {
self.grandTotal(data.finalTotal);
console.log("getting total");
});
};
//////////////////////////////////////////////////////////////////////////////////////////////////////
self.addItemToCart = function (listingID, qty) {
$.ajax({
url: '@Url.Action("phoneAdd","ShoppingCart",null)',
type: 'POST',
data: {
'listingID': listingID,
'requestedQty': qty
},
success: function (data) {
alert(data.status);
}
});
};
self.loadCartData = function () {
$.getJSON('@Url.Action("koShoppingCartItems","ShoppingCart",null)', function (data) {
$.each(data, function () {
self.discountPercent(data.length);
self.cartItems.push({
itemTitle: ko.observable(this.itemTitle),
cartItemID: ko.observable(this.cartItemID),
price: ko.observable(this.Price),
qty: ko.observable(this.Quantity),
displayImgPath: ko.observable(this.displayImgPath),
lineTotal: ko.observable(this.lineTotal)
});
});
});
self.getCartTotal();
}
self.loadCartData();
}
ko.applyBindings(new viewModel());
});
});
最佳答案
我假设您是在谈论要放入购物车的商品
的价格
。
一般来说,格式化是你想用 custom binding handlers 做的事情:
处理程序:
ko.bindingHandlers.price = {
update: function(element, valueAccessor, allBindings) {
var symbol = allBindings.get("priceSymbol") || "$";
element.innerHTML = symbol + ko.unwrap(valueAccessor()).toFixed(2);
// Or possibly even more formatting on that value
}
};
使用它:
<span data-bind="price: price"></span>
例子:
ko.bindingHandlers.price = {
update: function(element, valueAccessor, allBindings) {
var symbol = allBindings.get("priceSymbol") || "$";
element.innerHTML = symbol + ko.unwrap(valueAccessor()).toFixed(2);
// Or possibly even more formatting on that value
}
};
var vm = {
items: ko.observableArray()
};
ko.applyBindings(vm, document.body);
var counter = 0;
addItem();
function addItem() {
var price = Math.floor(Math.random() * 10000) / 100;
++counter;
vm.items.push({
name: "Random item " + counter,
priceUSD: price,
priceGBP: price * 0.6
});
if (counter < 5) {
setTimeout(addItem, 500);
}
}
.currency {
text-align: right;
padding-left: 4px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>USD</th>
<th>GBP</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name"></td>
<td data-bind="price: priceUSD" class="currency"></td>
<td data-bind="price: priceGBP, priceSymbol: '£'" class="currency"></td>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
但是您可以使用计算的,例如priceDisplay
:
var item = {
itemTitle: ko.observable(this.itemTitle),
cartItemID: ko.observable(this.cartItemID),
price: ko.observable(this.Price),
qty: ko.observable(this.Quantity),
displayImgPath: ko.observable(this.displayImgPath),
lineTotal: ko.observable(this.lineTotal)
};
item.priceDisplay = ko.computed(function() {
return "$" + this.price();
}, item);
self.cartItems.push(item);
关于javascript - Knockout JS,如何将$符号添加到observable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32169295/
我是一名优秀的程序员,十分优秀!