点击事件在淘汰赛中不会绑定到秒中

Click event doesn't bind in second foreach in knockout

本文关键字:绑定 事件 淘汰赛      更新时间:2023-09-26

为什么我的点击事件在第二个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