Нокаут Выбранный вариант по текстовому значению

Question

У меня есть приложение, которое позволяет пользователям делать курсы с несколькими областями курса. Область курса выбирается из выпадающего списка выбора. Список привязан к данным с помощью нокаута.

HTML

<select id="courseAreaType" name="selectCourseArea" class="form-control" data-bind="options:$parent.courseAreaTypes, optionsText: 'name', optionsValue:'id', optionsAfterRender:$parent.setIconPath, value:typeid"></select> 

Что мне нужно сделать, когда курс будет загружен, загрузить различную область курса, которые я сделал. Для каждой области курса необходимо загрузить свои значения в различные элементы управления.

Я смог загрузить снимок выбора со списком значений из БД и разрешить, когда пользователь выбирает параметр и сохраняет область курса, он успешно сохраняет имя курса.

Теперь то, что мне нужно сделать, это когда каждая область курс снова загружен, он выбирает опцию из выпадающего списка, основанного на courseArea.Name

Нокаут

var CourseViewModel = function (courseIn) { 
    var self = this; 
    if (courseIn === undefined) { 
     courseIn = {}; 
    } 

    self.id = courseIn.Id; 
    self.name = ko.observable(courseIn.Name); 
    self.postalCode = ko.observable(courseIn.PostalCode); 
    self.city = ko.observable(courseIn.City); 
    self.province = ko.observable(courseIn.Province); 
    self.courseId = ko.observable(courseIn.CourseId); 
    self.courseAreas = ko.observableArray(); 
    self.courseAreaTypes = ko.observableArray(); 

    $.each(courseIn.CourseAreas, function(index, courseArea) { 
     self.courseAreas.push(new CourseAreaViewModel(courseArea)); 
    }); 

    $.getJSON("/Course/GetCourseAreaTypes", function (types) { 
     $.each(types, function (index, type) { 
      self.courseAreaTypes.push(new CourseAreaTypeViewModel(type)); 
     }); 
    }); 

    $.each(courseIn.CourseAreas, function (index, courseArea) { 
     console.log(courseArea.Name); 
     var list = $('#courseAreaType'); 
     var options = $('option', list); // This is where my problem is 
    }); 

    self.setIconPath = function (option, courseAreaType) { 
     $(option).data("icon", courseAreaType.iconPath) 
     //console.log($(option).data("icon")); 
    } 
} 

var CourseAreaTypeViewModel = function (courseAreaTypeIn) { 
    var self = this; 

    if (courseAreaTypeIn === undefined) { 
     courseAreaTypeIn = {}; 
    } 

    self.id = courseAreaTypeIn.ID; 
    self.name = courseAreaTypeIn.Name; 
    self.iconPath = courseAreaTypeIn.iconPath; 
} 

var CourseAreaViewModel = function(courseAreaIn) { 
    var self = this; 
    if (courseAreaIn === undefined) { 
     courseAreaIn = {}; 
    } 
    self.id = courseAreaIn.Id; 
    self.name = ko.observable(courseAreaIn.Name); 
    self.acreage = ko.observable(courseAreaIn.Acreage); 
    self.goals = ko.observable(courseAreaIn.Goals); 
    self.typeid = ko.observable(courseAreaIn.TypeID); 
    self.selectedOption = ko.observable(); 
} 

Я пытался изменить его основанный на получении идентификатора элемента, я пробовал .val, .prop, .attr без каких-либо успехов. Когда я записываю данные в консоль элемента, он не показывает значения в раскрывающемся списке, поэтому у меня есть ощущение, что нокаут добавляет значения на уровне скрипта, а jquery не может видеть эти значения.

Answer 1

Основной подход к этому заключается в том, что необходимо привязать значение элемента select к наблюдаемому, которое содержит идентификатор выбранного типа курса.

Я лань простой скрипку, которая показывает это в действии:

http://jsfiddle.net/9a1njj1g/2/

JS является:

function CourseArea(types) { 
    this.types = ko.observableArray(types); 
    this.typeid = ko.observable(2); 
}; 


var types = [ 
    { id: 1, name: "one" }, 
    { id: 2, name: "two" }, 
    { id: 3, name: "three" } 
]; 

ko.applyBindings(new CourseArea(types)); 

HTML, является:

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

Чтобы применить это для вашего кода, я не думаю, что вам нужно много сделать. Может быть, реорганизовать JS немного, так что вы только обрабатывать CourseAreas когда вы загрузили все CourseAreaTypes:

$.getJSON("/Course/GetCourseAreaTypes", function (types) { 
    // Load all the types first. 
    $.each(types, function (index, type) { 
     self.courseAreaTypes.push(new CourseAreaTypeViewModel(type)); 
    }); 

    // Continue here, to be sure you have a complete list of types to work with. 
    $.each(courseIn.CourseAreas, function (index, courseArea) { 
     self.courseAreas.push(new CourseAreaViewModel(courseArea)); 
    }); 
}); 

Также убедитесь идентификатор вы выбираемой CourseAreaViewModel.typeid имеет эквивалентное точное значение в CourseAreaTypeViewModel.id ,

И убедитесь, что ваши данные соответствуют коду OK ... например, данные типов должны указывать свой идентификатор в столицах для self.id = courseAreaTypeIn.ID. Если нет, то вы выиграли; t получите ошибку, потому что self.id будет тихо установлен на undefined.

Вот скрипку, показывая все это работает с курсами, районам и типам:

http://jsfiddle.net/vpe4ut3m/1/