点击事件在淘汰赛中不会绑定到秒中
Click event doesn't bind in second foreach in knockout
为什么我的点击事件在第二个foreach中不起作用?
我的网页:
<div class="row" id="menuBody" data-bind="foreach:categoryArray">
<div class="outer col-md-2" data-bind=" attr:{id:id},event:{mouseover :$parent.mouseOverKnockout,mouseout:$parent.mouseOutKnockout }">
<div class="inner col-md-12">
<label class="label" data-bind="text:name"> </label>
<div class="children" data-bind="css:{changeTopChildren: changeTopChildren}">
<ul data-bind="foreach:$parent.items1" class="childrenUl">
<li data-bind=" text: name,attr:{id:id},click: $parent.selectLi" class="childrenLi col-md-12"></li>
</ul>
</div>
</div>
</div>
</div>
我的脚本:
var modelCategory = function (id, name) {
var self = this;
self.changeTopChildren = ko.observable(false);
self.name = ko.observable(name);
self.id = ko.observable(id);
}
var modelProduct = function (id, name) {
var _self = this;
_self.name = ko.observable(name);
_self.id = ko.observable(id);
_self.selectLi = function () {
alert("li");
console.log(" selectLi");
};
}
var viewModelMenuBody = function () {
var self = this;
self.selectLi = function (tag) {
alert("li");
console.log(" selectLi");
};
self.categoryArray = ko.observableArray();
self.items1 = ko.observableArray();
var temp = null;
self.mouseOverKnockout = function (arg, e) {
temp = arg;
for (var i = 0; i < self.categoryArray().length; i++) {
self.categoryArray()[i].changeTopChildren(false);
}
arg.changeTopChildren(true);
$.getJSON("/Home/getChildrenForMenu", { id: arg.id }, function (rowProduct) {
self.items1.removeAll();
for (var total = 0; total < rowProduct.length; total++) {
var temp = new modelProduct();
temp.id(rowProduct[total].id);
temp.name(rowProduct[total].name);
self.items1.push(temp);
}
});
}
self.mouseOutKnockout = function (arg) {
if (arg!=null)
arg.changeTopChildren(false);
//else
// temp.changeTopChildren(false);
};
(function () {
$.getJSON("/Home/getDataForMenu", null, function (rowCategory) {
for (var total = 0; total < rowCategory.length; total++) {
var temp = new modelCategory();
temp.id(rowCategory[total].id);
temp.name(rowCategory[total].name);
self.categoryArray.push(temp);
}
});
})();
};
var viewModel1 = new viewModelMenuBody();
ko.applyBindings(viewModel1, document.getElementById('menuBody'));
所有方法都在根视图模型对象中定义。因此$parent.selectLi
来自嵌套foreach
绑定的调用将不起作用$parent
因为上下文引用外部foreach
的当前项。
请改用$root.selectLi
。
更多信息: http://knockoutjs.com/documentation/binding-context.html
相关文章:
- 在offline.js中绑定事件
- 如何在angularjs中检查Kendo树视图数据绑定事件
- 在页面高度更改时绑定事件
- 在页面重新加载后绑定事件,并仅使用Knockout.js、html和js创建新的html元素
- 使用onbeforeunload绑定事件
- 传递类似绑定事件的参数
- 如何对修改后的元素重新绑定事件
- 聚合物模板自动绑定:在模板绑定事件之前的核心选择火灾
- Jquery差异B/w Jquery绑定事件
- SessionStorage绑定事件
- extjs,如何在表单操作中绑定事件
- 模拟 Web 浏览器方向更改事件以使用 Jasmine 测试绑定事件处理程序函数
- 绑定事件发射器上的单个事件
- 如何在绑定事件期间排除元素
- 将鼠标悬停在位于我的页面上的 iframe 上的绑定事件,其中包含包含的 src
- 在 jQuery 中创建 DOM 之前的绑定事件
- 如何在页面加载时在 ajax 调用中绑定事件处理程序后触发事件
- 使用 ajax 加载的页面绑定和取消绑定事件处理程序
- 咖啡脚本构造函数中的绑定事件
- 将数据添加到动态创建的元素和绑定事件