KnockoutJS：動態填充下拉列表

Question

我非常新手KnockoutJS，我已經做了與下拉列表簡單的事情，填充和使用靜態數據，但現在需要執行兩件事情動態DROPDOWNLIST

1.Want動態填充下拉列表（說任何列表），我們可以從我的控制器得到這個列表。

 var InsertVal = function(name, id) { 
      this.pname = name; 
      this.pid = id; 
      }; 

      var Valuess = function() { 
      $.ajax({ 
      dataType: "json", 
      url: "getParentCategory.do", 
      success: function (data) { 
      for(i=0;i<data.length;i++){ 
totalval.push(new InsertVal(data[i].parentCategoryName,data[i].parentCategoryId)); 
       }   
       handledata(totalval); 
      } 
       }); 

        }; 
     var handledata= function(totalval){ 
     console.log("!!@#"+totalval); 
     return totalval; 
    } 



     var obj={ 
     parentCategory : ko.observableArray(Valuess()), 
     chosenParentCategory : ko.observableArray() 
     }; 

     ko.applyBindings(obj); 


      <p> 
      <select data-bind="options: parentCategory, 
       optionsText: 'pname', 
      value: chosenParentCategory, 
      optionsCaption: 'Choose...'"> 
      </select>     
           </p> 

       <div data-bind="visible: chosenParentCategory"> 
        You have chosen a Parent Category 
       <span data-bind="text: chosenParentCategory() ? 
chosenParentCategory().pid : '0'"></span>. 
       </div> 

試圖動態填充下拉列表，從控制器成功獲取json數據，但數據沒有得到填充。

Answer 1

提意見是正確的，documentation的存在是爲了引導您完成這一點，但這裏是一個基本的（閱讀：不完全和不完全）fiddle讓你開始：

<select data-bind="options: Object.keys(viewModel.cars), optionsCaption: 'Select Make', value: make"></select> 
<select data-bind="options: modelOptions, optionsCaption: 'Select Model', value: model"></select> 

---

var viewModel = new (function() { 
    var self = this; 
    this.cars = { 
     'Chevy': ['Camaro', 'Spark'], 
     'Honda': ['Civic', 'Insight'], 
     'Tesla': ['Model S', 'Model X'] 
    }; 

    this.make = ko.observable(); 
    this.model = ko.observable(); 
    this.makeOptions = Object.keys(this.cars); 
    this.modelOptions = ko.computed(function() { 
     return this.cars[this.make()]; 
    }, this); 
})(); 

ko.applyBindings(viewModel); 

http://jsfiddle.net/3ec7gocc/

Answer 2

您需要在這裏解決各種問題。 1.你應該使obj成爲一個函數。 2.您需要創建其對象，然後在ko.applyBindings中使用該對象。 3.你沒有申報totalVal

你的代碼應該看起來像在本jsFiddle（請注意，我評論了你的Ajax調用，您可以啓用它回來了。）

的Javascript：

var InsertVal = function (name, id) { 
    this.pname = name; 
    this.pid = id; 
}; 

var Valuess = function() { 
    var totalval = []; 

    data = [{parentCategoryName : 'Parent1', parentCategoryId: 1}, 
      {parentCategoryName : 'Parent2', parentCategoryId: 2}, 
      {parentCategoryName : 'Parent3', parentCategoryId: 3}]; 

    for (i = 0; i < data.length; i++) { 
       totalval.push(new InsertVal(data[i].parentCategoryName, data[i].parentCategoryId)); 
      } 


    /*$.ajax({ 
     dataType: "json", 
     url: "getParentCategory.do", 
     success: function (data) { 
      for (i = 0; i < data.length; i++) { 
       totalval.push(new InsertVal(data[i].parentCategoryName, data[i].parentCategoryId)); 
      } 
     } 
    });*/ 

    return totalval; 
} 


var objViewModel = function() { 
    var self = this; 
    console.log(Valuess()); 
    self.parentCategory = ko.observableArray(Valuess()); 
    self.chosenParentCategory = ko.observableArray(); 
}; 

var obj = new objViewModel(); 
ko.applyBindings(obj); 

HTML：

<p> 
    <select data-bind="options: parentCategory, 
       optionsText: 'pname', 
      value: chosenParentCategory, 
      optionsCaption: 'Choose...'"></select> 
</p> 
<div data-bind="visible: chosenParentCategory">You have chosen a Parent Category <span data-bind="text: chosenParentCategory() ? 
chosenParentCategory().pid : '0'"></span>.</div>