Question

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

<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>

我的Sever Side Coding：

   [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函数移动到模型对象

Answer 2

您的选择框绑定到Projects observable，但您没有设置显式文本/值

<select id="Select1" data-bind='options: Projects, optionsText: 'ProjectName', optionsValue:'ProjectID', value: SelectedProjectId"' style="width: 312px"></select>

如果您需要在某处保存值，SelectedProjectId将是模型中的另一个可观察对象。

您想要更改的另一件事是直接填充实际的可观察数组而不是选择框。

<script type="text/javascript">

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

     var VM = new ViewModel();

     ko.applyBindings(ViewModel);


    $.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++) {
                VM.Projects.push(d[i]);
            }

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

</script>

在你正确绑定东西后，你可能想要更快地换掉VM.Projects.push（）。

在初始加载时填充数组时调用.push()会触发大量通知，这些通知可以真正使页面爬行。

如何在javascript中使用json将selectlist绑定到值

2 个答案: