Wie Zustand Auto ausgewählten Benutzern in Datenbindeoptionen wählen in Knockout

Question

ich habe ein Drop-down der Staaten und ihrer ID:

<select data-bind="options: States, optionsText: 'text', value: SelectedState"></select> 

Javascript

function ViewModel() { 
    this.States = ko.observableArray(states); 
    this.SelectedState = ko.observable(usersState); 
}; 


var states = [ 
     { value: 10, text: "California" }, 
     { value: 3, text: "New York" }, 
     { value: 9, text: "Florida" } 
    ]; 




ko.applyBindings(new ViewModel()); 

usersState ist eine Variable, kann oder darf nicht die Benutzerinformationen enthalten. Standardmäßig ist es Null. Wenn sich der Benutzer jedoch bereits angemeldet hat, sollte er mit dem vom Benutzer ausgewählten Status gefüllt werden. In diesem Beispiel haben sich die Benutzer angemeldet und ihr ausgewählter Zustand ist 9 für Florida.

Also ich erklärte usersState = 9; oben.

Was ich versuche zu tun ist einfach Auto Florida in der Dropdown-Liste basierend auf den Benutzerinformationen auswählen.

nicht sicher, warum es nicht es auswählt. Hier ist meine Geige: http://jsfiddle.net/neosketo/sw9dzjk1/2/

Answer 1

Die SelectedState bezieht sich auf einen Zustand Objekt. Ihre erste Auswahl ist eine Nummer. Sie werden das Statusobjekt entsprechend der Anzahl finden müssen:

var usersState = 9; 
 

 
// This method finds an object by value property 
 
var findStateById = function(states, id) { 
 
    return states.find(function(state) { 
 
    return state.value === id; 
 
    }); 
 
}; 
 

 
function ViewModel() { 
 
    this.States = ko.observableArray(states); 
 
    
 
    // In this example, SelectedState is an object with a value and text property 
 
    this.SelectedState = ko.observable(findStateById(states, usersState)); 
 
}; 
 

 
// Test data 
 
var states = [{ 
 
    value: 10, 
 
    text: "California" 
 
}, { 
 
    value: 3, 
 
    text: "New York" 
 
}, { 
 
    value: 9, 
 
    text: "Florida" 
 
}]; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<select data-bind="options: States, optionsText: 'text', value: SelectedState"></select>

(Beachten Sie, dass ich Array.prototype.find verwendet, die nicht von allen Browsern unterstützt wird)

Alternativ könnten Sie Verwenden Sie die optionsValue-Option, um Knockout zu sagen, die value-Eigenschaft zu verwenden, um die Auswahl den Optionen zuzuordnen. Persönlich bevorzuge ich das eigentliche Objekt: Knockout, das mit Verweisen auf reale Instanzen arbeiten kann, anstatt Zeichenketten zu verwenden, erleichtert die Entwicklung.

var usersState = 9; 
 

 

 
function ViewModel() { 
 
    this.States = ko.observableArray(states); 
 

 
    // In this example, SelectedState is a number 
 
    this.SelectedState = ko.observable(usersState); 
 
}; 
 

 
var states = [{ 
 
    value: 10, 
 
    text: "California" 
 
}, { 
 
    value: 3, 
 
    text: "New York" 
 
}, { 
 
    value: 9, 
 
    text: "Florida" 
 
}]; 
 

 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select data-bind="options: States, 
 
        optionsText: 'text', 
 
        optionsValue: 'value', 
 
        value: SelectedState"></select>