Question

我有一个应用程序spring mvc，视图模型是jsp页面。以前，我使用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;
}

但现在我想使用knockout ...如何使用类似的东西在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>

Knockoutjs从弹簧控制器加载数据

1 个答案: