绑定ko.observableArray <string> （[]） 至 <select>

Question

I am trying to bind a string array to a <select> . I try to bind it initially but keep getting a message that someOptions is undefined. I have try to move it in "Load Button" click event but it didn't seem to work either. Anyone has any idea where went wrong?

My Code:

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

You have multiple problems in your code:

• There is no such thing as observable<string> or generics in javascript proper, you should get rid of it;
• You do with: myOption but inside it you refer to myOption again . Use either $data or get rid of the with , or use if if you want to show/hide the entire thing optionally;
• You set the initial value of myOption but that's confusing / useless, as the rendering of the select will overwrite it to empty string on load;

With those things fixed everything works:

 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>