简体   繁体   中英

Knockout select data-bind

I'm new to knockout, and got a question about using data-binds and the "option" binding. I want to have two drop downs, with data from my database. I can get the first one to work, but the second one does not appear even if I implement it in the same way. Only the first drop down will appear in the page, with all the correct data. But the second one that is supposed to appear with all the room names, does not appear. But when I remove the first one the second one works. I have obviously missed something here, what could it be?

This is my HTML-code:

<div align = "center">
    <select data-bind="options: employees, 
        optionsText: 'FullName', 
        value: Id, 
        optionsCaption: 'Select employee to login'"class = "container">
    </select>
</div>  

<div align = "center">
    <select data-bind="options: meetingRooms, 
        optionsText: 'Location', 
        value: Id, 
        optionsCaption: 'Choose room to book'" class = "container">
     </select>
</div>  

And this is the java script code:

function BookingSystemViewModel() {
    var self = this;
    self.employees = ko.observableArray();
    self.meetingRooms = ko.observableArray();

    $.get( "/WebApi/API/Employees", function(data) {
        self.employees(data);
    });

     $.get( "/WebApi/API/MeetingRooms", function(data) {
        self.meetingRooms(data);
    });
<div align = "center">
    <select data-bind="options: employees, 
        optionsText: 'FullName', 
        value: Id, 
        optionsCaption: 'Select employee to login'"class = "container">
    </select>
</div>  

<div align = "center">
    <select data-bind="options: meetingRooms, 
        optionsText: 'Location', 
        value: Id, 
        optionsCaption: 'Choose room to book'" class = "container">
     </select>
</div>  

You are saying that value should be written to an observable named Id which you don't have in your view model. Maybe you're looking for optionsValue which is used to define what property you want to use as the value from the selected object.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM