選擇默認選項值與淘汰賽

Question

我想選擇一個默認選擇選項，基於我填充我的選擇選項的屬性之一。

此代碼直接從@rneimeyer's fiddle複製。我做了調整，做我想做的事情。

所以，我有選擇作爲我的observableArray。

var choices = [ 
    { id: 1, name: "one", choice: false }, 
    { id: 2, name: "two", choice: true }, 
    { id: 3, name: "three", choice: false } 
    ]; 

function ViewModel(choices, choice) { 
    this.choices = ko.observableArray(choices); 
}; 

rneimeyer的小提琴和礦山之間的區別是，我將我的對象上choice財產observableArray內，而不必爲我們想成爲默認選項單獨觀察到。

這是我的嘗試fiddle。

現在我在選擇元素標記中檢查choice屬性是否爲true。如果是，那麼我想將name設置爲value屬性，以使其成爲默認值。

<select data-bind="options: choices, optionsText: 'name', value: choice"></select> 

我已經與simple data model in my fiddle這裏還有這是工作只是因爲我想測試此。

我想我真正的疑問是如何檢查choice屬性在數據綁定。我發現optionText能夠正常訪問name屬性。不知道爲什麼value屬性中的choice屬性不相同。

Answer 1

我可能會誤導一些人。另外，我很抱歉沒有提及我使用的版本。我目前正在使用Knockout 3.0.0（你會明白爲什麼這個很重要）

此外，只是要說明，我不是說@ XGreen的方法是錯誤的，但那不是我正在尋找因爲這可能是由於我的糟糕解釋。

讓我先試着澄清一下我試圖完成的事情。 首先，我將擁有一個包含選項信息的對象數組。現在

[ 
{ id: 1, name: "one", choice: false }, 
{ id: 2, name: "two", choice: true }, 
{ id: 3, name: "three", choice: false } 
] 

，我想要做的是數據綁定選擇選項到陣列的選擇真的是默認選擇之一。

我不打算創建任何額外的observable，除了數組本身，這將是一個observableArray。

經過多番研究，我終於找到optionsAfterRender屬性options屬性。

<select data-bind="options: choices, 
        optionsValue: 'name', 
        optionsAfterRender: $root.selectDefault"> 
</select> 

那麼optionsAfterRender確實是，每個數組元素調用它，我已經設置檢查是否choice是真的還是假的，並選擇選項，其中有真正的價值自定義函數。

請注意，ko.applyBindingsToNode不是工作在我原來的小提琴中的版本2.2.0。

function ViewModel(choices) { 
    this.choices = ko.observableArray(choices); 
    this.selectDefault = function(option,item){ 
     if(item.choice){ 
      ko.applyBindingsToNode(option.parentElement, {value: item.name}, item); 
     } 
    }; 
}; 
ko.applyBindings(new ViewModel(choices)); 

而這裏是它的fiddle。

Answer 2

好吧如果我明白你想設置真正的選擇作爲你的默認選擇值。

首先，你需要涉及您的下降id下來，它成爲期權的價值，我們將基於這一獨特id

<select data-bind="options: choices, optionsText: 'name', optionsValue: 'id', value: selectedChoice"></select> 

篩選我們收集正如你現在看你需要創建一個新的可觀察的，稱爲selectedChoice，我們將使用計算結果填充該可觀測值。

var choices = [ 
    { id: 1, name: "one", choice: false }, 
    { id: 2, name: "two", choice: true }, 
    { id: 3, name: "three", choice: false } 
    ]; 

function ViewModel(choices) { 
    var self = this; 
    self.choices = ko.observableArray(choices); 
    self.trueChoice = ko.computed(function(){ 
     return ko.utils.arrayFirst(self.choices(), function(item){ 
      return item.choice === true; 
     }); 
    }); 
    self.selectedChoice = ko.observable(self.trueChoice().id); 
}; 

ko.applyBindings(new ViewModel(choices)); 

新計算財產trueChoice使用arrayFirst方法，以便在您選擇的集合，有其選擇的屬性設置爲true，返回的第一個項目。

現在我們有了我們真正的選擇，我們所要做的就是將選擇的下拉列表的值012xx設置爲真正的選擇的標識，以便在下拉菜單中選擇該項目。

Here is also a working fiddle for this

Answer 3

您可以創建一個計算保存所選項目

self.selected_options = ko.computed({ 
    read: function() { 
     return self.choices.filter(function(item){ return item.choice }); 
    }, 
    write: function(value) { 
     self.choices.forEach(function(item) { item.choice = value.indexOf(item) > 0;}); 
    } 
}) 

然後綁定到作爲選擇的選項。

Answer 4

補充說，禁止在下拉列表中選擇第一個選項，並有很好的工作要點KO的optionsCaption綁定，使用optionsDisableDefault綁定：

https://gist.github.com/garrypas/d2e72a54162787aca345e9ce35713f1f

HTML：

<select data-bind="value: MyValueField, 
    options:OptionsList, 
    optionsText: 'name', 
    optionsValue: 'value', 
    optionsCaption: 'Select an option', 
    optionsDisableDefault: true"> 
</select>