0

ビューのネストされた 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 を呼び出した後に、新しく設定されたビューモデル メンバーをネストされた div-subFamilyAccProduct に再バインドすることです。2 番目の foreach ループでサブメニューをバインドするのを手伝ってくれる人はいますか?

同じコードがhttp://jsfiddle.net/nayanaklkur/hX9Bg/8/に投稿されています。

前もって感謝します。

4

1 に答える 1

0

親切にこれを確認してください子孫バインディングを制御するカスタムバインディングの作成

デフォルトでは、バインディングは適用される要素にのみ影響します。しかし、すべての子孫要素にも影響を与えたい場合はどうでしょうか? これは可能です。バインディングは、子孫をまったくバインドしないように Knockout に指示できます。その後、カスタム バインディングは、それらを別の方法でバインドするために好きなことを行うことができます。

これらも確認できます：

ノックアウト「controlsDescendantBindings」の使用

ko.applyBindings で html 要素を除外する

于 2013-06-10T11:47:10.430 に答える