綁定ko.observableArray <string>（[]）到<select>

Question

我想綁定一個字符串數組到<select>。我嘗試將其初始綁定，但一直收到someOptions未定義的消息。我試圖在「加載按鈕」單擊事件中移動它，但它似乎也沒有工作。任何人都知道哪裏出了問題？

我的代碼：

function CarsViewModel() { 
    var self = this; 
    //Data 

    self.someOptions = ko.observableArray<string>([]); 
    self.myOption = ko.observable<string>("Toyota"); 

    //Operations 
    self.initData = function() { 
     //$.get('/Home/GetCars', function (data) { 
     var data = [ 
      "Mercedes-Benz", 
      "Toyota", 
      "Huyndai" ]; 
      self.someOptions(data); 
     //}); 
    } 
    //self.initData() 
} 

ko.applyBindings(new CarsViewModel()); 

<div> 
    <button data-bind="click: initData">Load data</button> 
    <h4>Preview</h4> 
    <p> 
     <select data-bind="options: someOptions, value: myOption"></select><br /> 
     <!-- ko with: myOption --> 
     A <span data-bind="text: myOption"></span>. 
     <!-- /ko --> 
    </p> 
</div> 

Answer 1

你已經在你的代碼中的多個問題：

• 沒有爲observable<string>或仿製藥沒有這樣的事情在JavaScript正確，你應該擺脫它;
• 你做with: myOption但它裏面你可以參考myOption再。使用$data或擺脫with，或使用if如果您想要顯示/隱藏整個事情;
• 您設置的初始值爲myOption，但這樣做很混亂/無用，因爲select的呈現將覆蓋它以在加載時清空字符串;

有了固定的一切這些東西的工作原理：

function CarsViewModel() { 
 
    var self = this; 
 

 
    self.someOptions = ko.observableArray([]); 
 
    self.myOption = ko.observable(""); 
 

 
    self.initData = function() { 
 
     var data = ["Mercedes-Benz", "Toyota", "Huyndai" ]; 
 
     self.someOptions(data); 
 
    } 
 
} 
 

 
ko.applyBindings(new CarsViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div> 
 
    <button data-bind="click: initData">Load data</button> 
 
    <h4>Preview</h4> 
 
    <p> 
 
     <select data-bind="options: someOptions, value: myOption"></select> 
 
     <br /> 
 
     <!-- ko if: !!myOption() --> 
 
     A <span data-bind="text: myOption"></span>. 
 
     <!-- /ko --> 
 
    </p> 
 
</div>