knockoutjs:值绑定互斥或点击事件
knockoutjs: value binding exclusive or click event?
我正在学习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());
问题是没有正确处理单击事件。使用上面的代码,单击输入元素不会有任何效果。如果我交换事件和值属性的顺序(数据绑定="click:$parent.click;value:name;"而不是上面的代码),click事件会起作用,但数据绑定不会发生(输入保持为空)。我看到了同样的效果,尽管如果数据绑定标记只包含点击,那就不那么令人惊讶了。我做错了什么?我想要输入元素的click事件处理程序和数据绑定。我正在Windows7上测试Firefox。
非常感谢Kai
<input data-bind="value: name, click: $parent.onClick" type="text"/>
相关文章:
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 如何在tinymce编辑器中将点击事件绑定到html标签
- 如何将事件绑定到从AJAX请求注入的HTML
- 将click事件绑定到AngularJS指令中的子元素
- Jquery将事件绑定到页面上的多个实例
- 事件绑定到动态创建的元素
- 使用jQuery进行事件绑定
- 如何将单击事件绑定到其他类
- 更改事件绑定's函数在页面加载时调用
- Jquery事件绑定获胜'当作为方法调用时不起作用,但当直接在控制台中调用时会起作用
- 动态创建的DOM元素上的jQuery事件绑定
- 我是否可以使用 Angular 将鼠标向上事件绑定到文档正文
- 将事件绑定到除 data-rel= BACK 之外的所有锚标记
- 将函数事件绑定到更改函数的复选框/标签
- 使用 Angular 和 UI-bootstrap 对模态事件绑定无法工作的指令
- 聚合物 - 将事件绑定到动态创建的元素
- 将事件绑定到其他UI组件's函数,在Kendo MVVM中
- jQuery Mobile——事件绑定
- JQuery无法将模糊事件绑定到所有<输入>页面中的元素
- 将点击事件绑定到新元素&使得ID'是独一无二的