代码之家 › 专栏 › 技术社区 › Richard

Knockout Select2按对象设置初始值

dropdown jquery-select2 knockout.js select html

Richard · 技术社区 · 6 年前

var cars = [{id: 1, name: 'Honda'}, {id: 2, name: 'Toyota'}, {id: 3, name: 'Dodge'}];
var selectedCar = ko.observable();

以下是我的html:

<select data-bind="value: selectedCar, optionsCaption: 'Select', optionsText: 'name', options: cars"></select>

所以现在,每当我在下拉列表中选择某个对象时,我的变量包含整个对象,如下所示:

selectedCar = {id: 1, name: 'Honda'};

selectedCar 变量设置为 {id: 1, name: 'Honda'}

我做错什么了?

2 回复 | 直到 6 年前

Ray 6 年前

optionsValue 绑定并将整个上下文绑定到它( $data );

<select data-bind="value: selectedCar, 
                   optionsCaption: 'Select', 
                   optionsText: 'name', 
                   options: cars, 
                   optionsValue: $data"></select>

{id: 1, name: 'Honda'} 作为初始值 selectedCar 如果湿陷 optionsValue: $data $optionsValue: 'id'

重要 cars 精选车 . 设置初始值的正确方法是 cars[0] .

我确信这是一个输入错误,但我还是要指定:当您创建任何需要由HTML访问的变量时,您需要将其绑定到它 this ,这将是对viewModel的引用。

this.cars = [{id: 1, name: 'Honda'}, {id: 2, name: 'Toyota'}, {id: 3, name: 'Dodge'}];
this.selectedCar = ko.observable();

让我们用小提琴来测试这一切:

var viewModel = function(){
  var self = this;
  self.cars = [{id: 1, name: 'Honda'}, {id: 2, name: 'Toyota'}, {id: 3, name: 'Dodge'}];
  self.selectedCar = ko.observable(self.cars[0]);
  

};

ko.applyBindings(new viewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="value: selectedCar, optionsCaption: 'Select', optionsText: 'name', optionsValue:$data, options: cars"></select>

<!-- to verify that we are getting the entire object -->
<p data-bind="text: ko.toJSON(selectedCar)"></p>

Jeff Mercado 6 年前

这个 value 选择框的属性将成为与中的选定项或属性集相对应的对象 optionsValue

对于这种情况,我发现更容易将select框的值绑定到对象的唯一id。然后可以通过计算值将该id映射到所需的实际实例。

function ViewModel(data) {
    this.cars = data.cars;
    this.selectedCarId = ko.observable(data.selectedCarId);
    this.selectedCar = ko.computed(() => {
        let selectedCarId = this.selectedCarId();
        return this.cars.find(c => c.id === selectedCarId);
    });
}

let model = {
    cars: [
        { id: 1, name: 'Honda' },
        { id: 2, name: 'Toyota' },
        { id: 3, name: 'Dodge' }
    ],
    selectedCarId: 2
};
ko.applyBindings(new ViewModel(model), document.getElementById('content'));

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div id="content">
  <select data-bind="value: selectedCarId,
                     optionsCaption: 'Select',
                     optionsText: 'name',
                     optionsValue: 'id',
                     options: cars">
  </select>
  <p>selectedCarId: <span data-bind="text: selectedCarId"></span></p>
  <p>selectedCar: <span data-bind="text: ko.toJSON(selectedCar)"></span></p>
  
  <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
</div>

function ViewModel(data) {
    this.cars = data.cars;
    this.selectedCar = ko.observable(
        data.cars.find(c => c.id === data.selectedCarId)
    );
}