javascript - 将 ko.observableArray<string>([]) 绑定(bind)到 <select>

Question

我正在尝试将字符串数组绑定(bind)到 <select> 。我最初尝试绑定(bind)它，但不断收到一条消息: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>