knockoutjs:值绑定独占还是点击事件?
Posted
技术标签:
【中文标题】knockoutjs:值绑定独占还是点击事件?【英文标题】:knockoutjs: value binding exclusive or click event? 【发布时间】:2013-12-30 01:05:00 【问题描述】:我正在阅读 knockoutjs 教程。我稍微修改了一下,看看会发生什么。所以我从“使用列表和集合”教程开始。首先,我想用 div 替换标签(这也不是 100% 有效,但这不是本文的主题)。然后,我不仅希望将表格单元格绑定到模型值,而且还希望有一个事件处理程序——比如 onClick。代码如下:
html:
<h2>Your seat reservations</h2>
<div data-bind="foreach: seats">
<div style="clear: left; display: table; width: 100%;" >
<input data-bind="value: name; click: $parent.onClick;" type="text"/>
</div>
<div style="width: 300px; float: left; display: table; width: 100%">
<select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'; select: $root.onClick"></select>
</div>
</div>
<button data-bind="click: addSeat">Reserve another seat</button>
JS:
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal)
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel()
var self = this;
// Non-editable catalog data - would come from the server
self.availableMeals = [
mealName: "Standard (sandwich)", price: 0 ,
mealName: "Premium (lobster)", price: 34.95 ,
mealName: "Ultimate (whole zebra)", price: 290
];
// Editable data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[0]),
new SeatReservation("Kai", self.availableMeals[0])
]);
// Operations
self.addSeat = function()
self.seats.push (new SeatReservation ("<Please fill>", self.availableMeals[0]));
self.onClick = function () alert ('Lets make love');
ko.applyBindings(new ReservationsViewModel());
问题是点击事件没有被正确处理。使用上面的代码,点击输入元素不会有任何效果。如果我交换事件和值属性的顺序(data-bind="click: $parent.onClick; value: name;" 而不是上面的代码)点击事件有效但数据绑定不会发生(输入保持为空)。我看到了同样的效果,尽管如果 data-bind 标记只包含点击就不那么令人惊讶了。 我究竟做错了什么?我希望输入元素的点击事件处理程序 和 数据绑定。 我正在 Windows 7 上使用 Firefox 进行测试。
非常感谢 启
【问题讨论】:
【参考方案1】:Knockout 中的绑定用逗号分隔,而不是分号。另外,请去掉结尾的分号。
<input data-bind="value: name, click: $parent.onClick" type="text"/>
【讨论】:
以上是关于knockoutjs:值绑定独占还是点击事件?的主要内容,如果未能解决你的问题,请参考以下文章
knockoutjs 点击绑定在嵌套的 foreach 中不起作用
如何在 knockoutjs 按钮点击事件中添加 Google AdWords 转化跟踪代码?