Question

我有一个嵌套菜单，需要在View中的嵌套DIV中绑定。我有一个主ViewModel，它将其他视图模型保存为成员。以下是视图模型的定义：

ProductMenu = function (name, subProductsMenu1, selectedMenu) {
    this.productname = ko.observable(name);
    this.submenu = ko.observableArray(subProductsMenu1);
    this.selectedProductName = ko.observable();
};
ProductSubMenu = function () {
    submenuName = ko.observable();
    submenu2 = ko.observableArray([]);
    selectedSubMenuName = ko.observable();
};
ProductSubMenu2 = function () {
    submenu2Name = ko.observable();
    properties = ko.observableArray([]);
    selectedSubMenu2Name = ko.observable();
};
Properties = function () {
    productName = ko.observable();
    shortDesc = ko.observable();
    longDesc = ko.observable();
    additionalDocs = ko.observableArray([]);
};

function MainViewModel() {
    self = this;
    self.productModel = new ProductMenu();
    self.subMenuModel = new ProductSubMenu();
    self.submenu2Model = new ProductSubMenu2();
    self.propertyModel = new Properties();
    self.AllProductsModel = ko.observableArray([]);

    self.ReturnToFamilyProduct = ko.observable(true);
    self.ShowSubMenu = ko.observable(false);
    self.showSubMenu2 = ko.observable(false);
    self.ShowBackBtnOnSubMenuClick = ko.observable(false);
    self.IfDocumentsPresent = ko.observable(true);

    //to add product to products array
    self.AddProducts = function (name, subProductsMenu1, selectedMenu) {
        self.AllProductsModel.push(new ProductMenu(name, subProductsMenu1, selectedMenu));
    };

    self.GetSubFamilyForProducts= function()
    {
        SubProductMenus1 = [];
        data=[{subFam:"test1"}, {subFam:"test2"},{subFam:"test3"}];
        for(var i=0; i< data.length; i++)
        {
            var y= data[i];
            var temp = new ProductSubMenu();
                temp.submenuName = y;
                SubProductMenus1.push(temp);

        }
        self.productModel= new ProductMenu();
        self.productModel.productname= this.productname;
        self.productModel.selectedProductName= this.productname;
        self.productModel.submenu= SubProductMenus1;
        alert(self.AllProductsModel().count);
        ko.utils.arrayForEach(self.AllProductsModel(), function (product) {
                if (product.productname() == this.productname) {
                    product.submenu = SubProductMenus1;
                }
            })
         ko.applyBindings(self.productModel, document.getElementById("subFamilyAccProduct"));
    };
}

 var VM;

$(document).ready(function () {
    console.info(new ProductMenu());
    VM = new MainViewModel();

    ko.applyBindings(VM);

    FetchProductFamiliesForProductsKO();

});

function FetchProductFamiliesForProductsKO() {
    data = [{
        family: "fassm1"
    }, {
        family: "famsss2"
    }];
    for (var i = 0; i < data.length; i++) {
        var x = data[i];

        VM.AddProducts(x.family, null,null);
    }
}

视图代码为：

<div id="browseProductDiv" >
    <div id="familyDiv">
      <ul id="productFamilyList" data-bind="foreach: AllProductsModel">
         <li data-bind="click: $root.GetSubFamilyForProducts">
            <a data-bind="text: productname">
               <div data-bind="stopBinding: true">              
                 <div id="subFamilyDiv" data-bind="visible: $root.ShowSubMenu">
                   <div id="subFamilyAccProduct" data-bind="visible: $root.ShowSubMenu">
                     <div data-bind=" foreach: productModel.submenu">
                      <h3 data-bind="attr: { 'id':subMenuName + 'Prod'},text:   subMenuName">                                                  
                      </h3>
                     </div>
                    </div>
                  </div>
               </div>
            </a>
        </li>
     </ul>
   </div>
</div>

从函数FetchProductFamiliesForProductsKO获取产品列表后，通过单击调用GetSubFamilyForProducts函数来填充子菜单。要求是在第一个foreach循环后停止绑定，并在调用函数GetSubFamilyForProducts后将新填充的viewmodel成员重新绑定到嵌套的div-subFamilyAccProduct。任何人都可以帮助我在第二个foreach循环中绑定子菜单吗？

相同的代码发布在：http://jsfiddle.net/nayanakalkur/hX9Bg/8/

提前致谢。

Answer 1

请检查此Creating custom bindings that control descendant bindings

默认情况下，绑定仅影响它们所在的元素应用。但是如果你想影响所有后代元素呢？这个有可能。你的绑定可以告诉Knockout不要绑定后代，然后你的自定义绑定可以做任何事情喜欢以不同的方式绑定它们。

你也可以检查这些：

Knockout “controlsDescendantBindings” usage

Exclude html element at ko.applyBindings

停止绑定嵌套菜单 - 淘汰赛

1 个答案: