javascript - 如何在javascript中使用json将选择列表绑定(bind)到值

Question

我是 Web 应用程序开发新手，我需要绑定(bind)从 json 对象检索的值。我尝试了多种方法，但无法将值绑定(bind)到我的组合框。

<script type="text/javascript">

     var ViewModel = {  
         CheckIn : ko.observable(),
         CheckOut: ko.observable(),
         Lunch: ko.observable(),
         Rest: ko.observable(),
         WorkOnProject: ko.observable(),
         Projects: ko.observableArray()
     };


this.GetProjects = function () {
    $.ajax({
        type: "POST",
        url: 'TimeRecord.aspx/ReturnComplexType',
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (arg) {


            for (var i = 0; i < arg.d.length ; i++) {
                var value = arg.d[i].ProjectCode;

                var option = new Option(arg.d[i].ProjectCode, arg.d[i].ProjectCode);
                Select1.add(option, null);
            }

        },
        error: function (arg) {
        }
    });
};

ko.applyBindings(ViewModel);

</script>

我的 HTML 代码:

    <tr>
         <td class="auto-style1">Project Code </td> 
         <td ><select id="Select1" data-bind='options: Projects' style="width: 312px"></select>
               <button data-bind='click: GetProjects'>Cancel</button>
         </td> 
    </tr>

我的服务器端编码:

   [WebMethod]
        public static object ReturnComplexType()
        {

            List<Project> projects = new List<Project>();
            Project p = new Project();
            p.ProjectID = 1;
            p.ProjectCode = "ABC";
            p.ProjectName = "Test";
            projects.Add(p);

            Project p2 = new Project();
            p2.ProjectID = 2;
            p2.ProjectCode = "DEF";
            p2.ProjectName = "xsd";
            projects.Add(p2);

            return projects;

        }

Answer 1

你的结构已经偏离了，你正在将对象实例与窗口对象上的函数混合在一起。这是解决问题的一种方法

ViewModel = function() {
    this.CheckIn = ko.observable();
    this.CheckOut = ko.observable();
    this.Lunch = ko.observable();
    this.Rest = ko.observable();
    this.WorkOnProject = ko.observable();
    this.Projects = ko.observableArray()   
};

ViewModel.prototype = {
    GetProjects: function () {
        $.ajax({
            type: "POST",
            url: 'TimeRecord.aspx/ReturnComplexType',
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                this.Projects(data);
            }.bind(this),
            error: function (arg) {
            }
        });
    };
};

ko.applyBindings(new ViewModel());

我所做的是将 GetProjects 函数移动到模型对象