Question

所以我使用KnockoutJS填充<select>选项并获取选择的值。

<select data-bind="enable: cols1().length > 0, options: cols1(), optionsText: 'name', value: jCol1" id="col1"></select>

变量cols1保存简单格式为{ name: "name" }的对象，因为它需要是我在页面上执行的其他一些操作的对象。有没有办法在这个元素的数据绑定之外设置select的值？

Answer 1

绑定的value部分说：

存储对cols1中jCol1

中项目的引用

如果要更改UI外部的选择，则必须将jCol1设置为cols1数组中的值。如果您尝试将其设置为其他任何内容，则knockout会立即将其重置为第一个值。在下面的示例中切换注释的代码行，看看会发生这种情况：

var ViewModel = function() {
  this.options = ko.observableArray([
    { name: "Item 1" },
    { name: "Item 2" },
    { name: "Item 3" }
  ]);
  
  this.selection = ko.observable();
  this.selection.subscribe(function(newValue) { 
    console.log(newValue) 
  });
  
  this.changeSelectionFromOutside = function() {
    // This does not work because knockout does not do a 
    // deep comparison of objects
    // this.selection({ name: "Item 3" });  
    
    // This _does_ work, because it references one of the
    // options objects
    this.selection(this.options()[2]);
  }.bind(this);
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>


<select data-bind="options: options, value: selection, optionsText: 'name'"></select>

<button data-bind="click: changeSelectionFromOutside">
  Set option 3
</button>

现在，您还可以选择仅存储所选内容的字符串ID（或其他原语）。这样可以更轻松地从外部设置内容，因为您只需要ID而不是对实际项目的引用：

var ViewModel = function() {
  this.options = ko.observableArray([
    { name: "Item 1" },
    { name: "Item 2" },
    { name: "Item 3" }
  ]);
  
  this.selection = ko.observable();
  this.selection.subscribe(function(newValue) { 
    console.log(newValue) 
  });
  
  this.changeSelectionFromOutside = function() {
    this.selection("Item 3");
  }.bind(this);
};

ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="options: options, value: selection, optionsText: 'name', optionsValue: 'name'"></select>

<button data-bind="click: changeSelectionFromOutside">
  Set option 3
</button>

Answer 2

让我们使用状态示例：

//list of US states in array
self.usStates = [
        { StateName: 'Alabama', Abbr: 'AL' },
        { StateName: 'Alaska', Abbr: 'AK' },
        ...
//observable from that array
self.States = ko.observableArray(self.usStates);
//the selected state
self.selectedState = ko.observable();

//set selectedState from some value received from server
self.selectedState(self.States.find("Abbr", { StateName: "", Abbr: '<<Value i.e. TX>>' }).Abbr);
//finds TX, sets state to 'Texas'

//find custom function used to find specific object in array
ko.observableArray.fn.find = function (prop, data) {
        var valueToMatch = data[prop];
        return ko.utils.arrayFirst(this(), function (item) {
            return item[prop] === valueToMatch;
        });
 };

对于你想要做的事情，这可能过于复杂，但当我想根据数据库中记录的值从select中选择一个值时，我就是这样做的。

在Knockout中设置动态填充选择的值

2 个答案: