0

I'm new to web application development and i need to bind values which i retrieved from json object. i tried several ways but couldn't able to bind values to my combo box.

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

My HTML Code:

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

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

        }
4

2 回答 2

2

您的结构已经偏离，您正在将对象实例与窗口对象上的功能混合在一起。这是解决它的一种方法

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

于 2013-07-01T11:14:09.213 回答
1

您的选择框绑定到 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()当您在初始加载时填充数组时调用会触发大量通知，这些通知可以真正使页面爬行。

于 2013-07-01T15:02:41.543 回答