Question

任何想法为什么在以下示例中选择不会在HTML中呈现。没有错误被捕获，applyBindings（）似乎工作正常，但下拉列表不显示在HTML ...

这是JS代码：

$(document).ready(function () {
    try
    {
       var mainVM = new MainViewModel();                        
       mainVM.CategoriesVm.Init(document.getElementById("divCategoriesView"));
       mainVM.CategoriesVm.BindViewModel();    
       ko.applyBindings(mainVM.CategoriesVm, mainVM.CategoriesVm.DomSection);
       alert('finished');
    }
    catch(err)
    {
        alert(err);
    }
});

function MainViewModel() {    
   var self = this;
   this.CategoriesVm = new CategoriesViewModel();    
   return self;
};

function CategoriesViewModel() {
   var self = this;

   self.$type = 'CategoriesViewModel';
   self.Categories = ko.observableArray();
   self.selectedCategory = ko.observable();
   self.DomSection = null;

   this.Init = function (domSectionElement) {
    self.DomSection = domSectionElement;
   };

var GetJsObject = function (obj) {
    if (obj && ObjectTypeChecker.IsJsonObject(obj)) {
        obj = $.parseJSON(obj);
    }

    if (obj && obj.d) {
        obj = eval(obj.d);
    }

    return obj;
};   

this.BindViewModel = function (jsonCategories) {
    try {
        var data = [{
            CategoryID: 1,
            CategoryName: "red"
        }];
        self.Categories(data);

        ko.mapping.fromJS(self.Categories, self);
    } catch (err) {
        alert(err);
    }
  };

};

这是HTML：

<div id="divMainView">
    <div id="divCategoriesView" data-bind="with: MainViewModel.CategoriesViewModel">
        <select ID="ddlProductCategory" data-bind="options: Categories, optionsValue: CategoryID, optionsText: CategoryName, value: selectedCategory">
        </select>
    </div>
</div>

Answer 1

参见jsfiddle：http://jsfiddle.net/dQ3uW/

<select ID="ddlProductCategory" data-bind="options: Categories, optionsValue: function(item){ return item.CategoryID; }, optionsText: function(item){ return item.CategoryName; }, value: selectedCategory">
</select>

我不明白这段代码

data-bind="with: MainViewModel.CategoriesViewModel"

Answer 2

我确实解决了我想要的结构问题。但是，看起来根视图模型必须创建并分配给全局上下文变量;我不认为这是特别好的主意，但如果有任何其他方法可以解决这个问题，请告诉我......

这是最终代码。 HTML：

<div id="divMainView">
    <div id="divCategoriesView" data-bind="with: mainVM.CategoriesVm">
        <select ID="ddlProductCategory" data-bind='options: Categories, optionsValue: "CategoryID", optionsText: "CategoryName", value: "selectedCategory"'>
        </select>
    </div>
</div>

JS：

    mainVM = new MainViewModel();   
    $(document).ready(function () {
    try
    {                              
       mainVM.CategoriesVm.Init(document.getElementById("divCategoriesView"));
       mainVM.CategoriesVm.BindViewModel();    
       ko.applyBindings(mainVM.CategoriesVm, mainVM.CategoriesVm.DomSection)
       alert('finished');
    }
    catch(err)
    {
        alert(err);
    }
});

function MainViewModel() {    
   var self = this;
   this.CategoriesVm = new CategoriesViewModel();    
   return self;
};

function CategoriesViewModel() {
   var self = this;

   self.$type = 'CategoriesViewModel';
   self.Categories = ko.observableArray();
   self.selectedCategory = ko.observable();
   self.DomSection = null;

   self.Init = function (domSectionElement) {
    self.DomSection = domSectionElement;
   };


    var GetJsObject = function (obj) {
        if (obj && ObjectTypeChecker.IsJsonObject(obj)) {
            obj = $.parseJSON(obj);
        }

        if (obj && obj.d) {
            obj = eval(obj.d);
        }

        return obj;
    };   

    this.BindViewModel = function (jsonCategories) {
        try {
            var data = [{
                    CategoryID: 1,
                    CategoryName: "red"
                },
                {
                    CategoryID: 2,
                    CategoryName: "blue"}];
            self.Categories(data);

            ko.mapping.fromJS(self.Categories, self);
        } catch (err) {
            alert(err);
        }
  };

};

knockout JS：没有渲染选择/下拉列表

2 个答案: