无法获取正确的淘汰绑定上下文
Unable to get correct knockout binding context
我有下面的javascript来执行淘汰绑定。
var context = this;
var viewModel = {
lineitems: [{
quantity: ko.observable(1),
title: 'bar',
description: 'foo',
price: ko.observable(10),
total: ko.observable(10),
formattedTotal: ko.computed({
read: function () {
return '$' + this.price().toFixed(2);
},
write: function (value) {
value = parseFloat(value.replace(/[^'.'d]/g, ""));
this.price(isNaN(value) ? 0 : value);
}
})
}]
};
ko.applyBindings(viewModel);
它按预期绑定,但是当我应用formattedTotal时,我会得到以下javascript错误。
Uncaught TypeError: Object [object global] has no method 'price'
我试过对语法做一些修改,但似乎都做不好,哪里出了问题?
问题在formattedTotal
方法内部:作用域this
-不是您的viewModel。试试这个:
var viewModel = {
lineitems: [{
quantity: ko.observable(1),
title: 'bar',
description: 'foo',
price: ko.observable(10),
total: ko.observable(10),
formattedTotal: ko.computed({
read: function () {
return '$' + viewModel.lineitems.price().toFixed(2);
},
write: function (value) {
value = parseFloat(value.replace(/[^'.'d]/g, ""));
viewModel.lineitems.price(isNaN(value) ? 0 : value);
}
})
}]
};
考虑为视图模型使用构造函数,而不是对象文字;这使得处理范围问题更加容易和干净。请参阅此答案以获取示例。
通常在JavaScript中使用this
不是最好的主意。尤其是淘汰赛。在执行过程中,您永远不知道this
会是什么。
所以我建议这样写:
function LineItem(_quantity, _title, _description, _price) {
var self = this;
self.quantity = ko.observable(_quantity);
self.title = ko.observable(_title);
self.description = ko.observable(_description);
self.price = ko.observable(_price);
self.total = ko.computed(function () {
return self.price() * self.quantity();
}, self);
self.formattedTotal = ko.computed(function () {
return '$' + self.total().toFixed(2);
}, self);
};
var viewModel = {
lineItems: [
new LineItem(10, 'Some Item', 'Some description', 200),
new LineItem(5, 'Something else', 'Some other desc', 100)
]
};
ko.applyBindings(viewModel);
你可以在这里阅读一些关于self=this
模式的讨论。
相关文章:
- 为什么我的淘汰选项绑定不起作用
- 无法获取正确的淘汰绑定上下文
- 淘汰MVC,绑定模型&将对象添加到模型中
- 如何使Select2自动完成工作内foreach绑定的淘汰
- 即使使用默认教程,也无法应用淘汰绑定
- 如何使用淘汰选项绑定从select中删除值
- 淘汰绑定中的同步动画
- 使用AJAX发布数据,同时使用淘汰绑定
- 等待ajax结果绑定淘汰模型
- 淘汰jQuery验证绑定处理程序
- 淘汰双向左侧和顶部绑定
- 知道可观察的在根模型中的位置,在 foreach/后代绑定中被淘汰
- 淘汰模板:自己的绑定上下文,相同的父级
- Google Analytics(分析)在淘汰赛中推送跟踪事件.js数据绑定
- 如果语句绑定短路在淘汰.js
- 将数据绑定参数传递给函数淘汰
- 使用 WinJS 进行数据绑定,与淘汰一样强大
- 为什么在这种情况下,绑定在淘汰赛中不起作用
- HoverContent淘汰绑定
- 基于textInput的自定义淘汰绑定