knockout.js - 如何检查 是否已经绑定(bind)到 viewModel？ - knockout .js

Question

我在绑定(bind)到单击事件的 View 模型方法之一中应用绑定(bind)。当我第二次单击时，再次完成绑定(bind)， View 模型数据无法显示在 View 中。我可以有一个条件来检查 div 是否已经绑定(bind)到 View 模型？

Here is My Jsfiddle

var VM;
$(document).ready(function () {
    VM = new MainViewModel();
    ko.applyBindings(VM,document.getElementById("familyDiv"));
    FetchProductFamiliesForProductsKO();
});

function FetchProductFamiliesForProductsKO() {
    var data=[{family: 'family1'},{family:'family2'},{family:'family3'}];
    for (var i = 0; i < data.length; i = i + 1) {
        var fam = data[i].family;
        //console.log(fam);
        VM.AddProducts(fam, null, fam);
    }
};

ProductMenu= function(name, subProductsMenu1, selectedMenu) {
    var self= this;
    self.productname = ko.observable(name);
    self.submenu = ko.observableArray([]);
    self.selectedProductName = ko.observable();
};

ProductSubMenu=function() {
    var self = this;
    self.submenuName = ko.observable();
    self.submenu2 = ko.observableArray([]);
    self.selectedSubMenuName = ko.observable();
};

ProductSubMenu2= function() {
    var self = this;
    self.submenu2Name = ko.observable();
    self.properties = ko.observableArray([]);
    self.selectedSubMenu2Name = ko.observable();
};

Properties= function() {
    var self = this;
    self.pName = ko.observable();
    self.shortDesc = ko.observable();
    self.longDesc = ko.observable();
    self.additionalDocs = ko.observableArray([]);
};

AdditionalDocument = function () {
    var self = this;
    self.docName = ko.observable();
    self.index = ko.observable();
};

function MainViewModel() {
    var self= this;
    self.productModel = new ProductMenu();
    self.subMenuModel = new ProductSubMenu();
    self.submenu2Model = new ProductSubMenu2();
    self.propertyModel = new Properties();
    self.AllProductsModel = ko.observableArray([]);
    //if true- show family products, hide sub family products 
    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) {
        this.AllProductsModel.push(new ProductMenu(name, subProductsMenu1, selectedMenu));
    };

     self.GetSubFamilyForProducts = function (data, event) {
        this.ShowSubMenu = ko.observable(true);
        SubProductMenus1 = [];
        var currentElement = data;
        $('#subFamilyDiv').show();
        $('#btnBackToFamily').html("back: "+currentElement.productname());
        self.productModel = new ProductMenu();
        self.productModel.productname = ko.observable(currentElement.productname());
        self.selectedProductName = ko.observable(currentElement.productname());
        var data=[{subFamily: 'subFamily1'},{subFamily:'subFamily2'},{subFamily:'subFamily3'}];

            $(data).each(function (index, subFamily) {
                var tt= data[index].subFamily;
                var temp = new ProductSubMenu();
                //console.log("subfamily:"+ tt);
                temp.submenuName = tt;
                SubProductMenus1.push(temp);
            });
            self.showSubMenu2= true;
            self.productModel.submenu = ko.observable(SubProductMenus1);
            ko.applyBindings(VM.productModel, document.getElementById("subFamilyAccProduct"));
    };

     self.fetchProductItemsForProduct = function (famName, data, event) {
        var SubProductMenus2 = [];

        self.subMenuModel = new ProductSubMenu();
        self.subMenuModel.submenuName = famName.submenuName;
        self.subMenuModel.selectedSubMenuName = famName.submenuName;
        self.ShowSubMenu = true;
        self.showSubMenu2 = true;
         var productItems=[{shortDesc:'subProd1'},{shortDesc: 'subProd2'}, {shortDesc: 'subProd3'}];
            $(productItems).each(function (index, value) {
                //console.log("short Desc: "+ productItems[index].shortDesc);
                var temp2= productItems[index].shortDesc;
                var temp = new ProductSubMenu2();
                temp.submenu2Name = temp2;
               self.subMenuModel.submenu2.push(temp);
                SubProductMenus2.push(temp);
            });
         //console.log("item coount: "+ self.subMenuModel.submenu2.length);
            ko.applyBindings(VM.subMenuModel, document.getElementById("ProductItemsForProd"));
    };

    self.ShowProductInfoBrowse = function (subFamily, item) {
        //console.log("sub family name is :" + subFamily + ", "+ item);
        var familyname = VM.productModel.selectedProductName();
        self.submenu2Model = new ProductSubMenu2();
        self.submenu2Model.submenu2Name = item;
        self.submenu2Model.selectedSubMenu2Name = item;
        additionalD=[]; 
        var temp = new AdditionalDocument();
        temp.docName = "PDF document";
        additionalD.push(temp);

        var temp2 = new AdditionalDocument();
        temp2.docName = "test document";
        additionalD.push(temp2);
        console.log("doc count; "+ additionalD.length);
         self.propertyModel = new Properties();
         self.propertyModel.pName = ko.observable("Product Testing");
         self.propertyModel.shortDesc = ko.observable("short Description");
         self.propertyModel.longDesc = ko.observable("long Description");
         self.propertyModel.additionalDocs= ko.observable(additionalD);
         ko.applyBindings(VM.propertyModel, document.getElementById("ProductDetailsDiv"));       
    };
}

谢谢!

Answer 1

要确定 View 模型是否已经绑定(bind)到特定节点，您可以使用

ko.dataFor(yourNode)

如果结果是真的，那么某些东西已经被绑定(bind)了。
您的示例很复杂，但我会推荐以下内容:

我认为使用这种代码:

click:function(data, event){ $('#subFamilyDiv').show(); $('#familyDiv').hide(); $root.GetSubFamilyForProducts(data, event); }

这不是一个好的做法，您可以使用特定的 knockout 绑定(bind)，例如 visible binding

另外，我不明白您为什么要在方法中进行绑定(bind):

ko.applyBindings(VM.propertyModel, document.getElementById("ProductDetailsDiv")); 

为什么不准备好文档上的所有内容并在需要时更新您的 VM.propertyModel 呢？