Нокаутjs загружает данные с контроллера пружины

Question

У меня есть приложение spring mvc, view model is jsp page. Раньше я использовал порядок JSTL, чтобы получить объект Java

<select name="parallel" class="task-parallel"> 
    <c:forEach var="listSchoolClasses" items="${listSchoolClasses}"> 
    <option value='${listSchoolClasses.id}'>${listSchoolClasses.name}</option> 
    </c:forEach> 
</select> 

Моего контроллер:

@Controller 
public class PageController { 

    @Autowired 
    SchoolClassesService schoolClassesService; 

    @RequestMapping("/tasks.htm") 
    public ModelAndView tasks() { 

    ModelAndView model = new ModelAndView("tasks"); 
    model.addObject("listSchoolClasses", schoolClassesService.getAllSchoolClasses()); 

    return model; 
} 

Но теперь я хочу использовать нокаут ... Как получить объект на странице JSP с помощью что-то вроде этого?

<select data-bind="options: ${listSchoolClasses}, value: ${listSchoolClasses.id}, optionsText: ${listSchoolClasses.name}"></select> 

Answer 1

Я не могу придумать ничего лучше, чем сделать запрос Ajax

$(document).ready(function() { 

     function getAllSchoolClasses(){ 
      var schoolClasses = []; 
        $.ajax({ 
         type: "GET", 
         url: cr + "/task/getAllSchoolClasses.action", 
         dataType: "json", 
         success: function (data) { 
          for(var i=0; i<data.length; i++) 
           schoolClasses[i] = {classID:data[i].id, className:data[i].name}; 
          //schoolClasses[i] = {classID:data[i].id, className:data[i].name}; 
         }, 
         async:false 
        }); 
        return schoolClasses; 
       } 

    var maxScoreModel = function (id, score, schoolclass) { 
     var self = this; 

     self.schoolClasses = getAllSchoolClasses(); 
     self.scores = [ 
      { val: 1 }, 
      { val: 2 }, 
      { val: 3 }, 
      { val: 4 }, 
      { val: 5 } 
     ]; 
     self.id = ko.observable(id); 
     self.selectedMaxScore = ko.observable(score); 
     self.selectedSchoolClass = ko.observable(schoolclass); 
    };   


     var taskViewModel = function() { 
       var self = this; 


     self.maxScores = ko.observableArray([ 
      new maxScoreModel(), 
      new maxScoreModel() 
     ]); 

     self.addMaxScore = function(id,score, schoolclass) { 
      self.maxScores.push(new maxScoreModel(id,score, schoolclass)); 
     }; 
     self.removeMaxScore = function(maxScore) { self.maxScores.remove(maxScore) }; 


     }; 


      ko.applyBindings(new taskViewModel()); 
    }); 

JSP-страница:

<div class="container" data-bind="foreach: maxScores"> 
      <select data-bind="options: schoolClasses, optionsText: 'className', optionsValue: 'classID', 
          value: selectedSchoolClass, optionsCaption: 'Choose..'"> 
      </select> 
      <select data-bind="options: scores, optionsText: 'val', optionsValue: 'val', 
         value: selectedMaxScore, optionsCaption: 'Choose..'"> 
      </select> 
      <a href="#" data-bind="click: $root.removeMaxScore"><spring:message code="form.field.remove"/> </a> 
      <br/> 
     </div> 
     <button data-bind="click: addMaxScore, enable: maxScores().length < 3"><spring:message code="form.field.add"/> </button> 
     </div>