Question

为什么我的点击事件在第二个foreach中不起作用？

我的HTML：

<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'));

Answer 1

所有方法都在root viewmodel对象中定义。因此，嵌套$parent.selectLi绑定的foreach调用无效，因为$parent上下文引用外部foreach的当前项。

改为使用$root.selectLi。

更多信息：http://knockoutjs.com/documentation/binding-context.html

点击事件在淘汰赛

1 个答案: