Question

我目前有两个已合并的视图模型。现在我想将此MasterViewModel数据绑定到页面中的元素，但不确定如何。

这是我的HTML：

   <select data-bind="options: MasterViewModel.VMPR.ProjectName">
   </select>
   <select data-bind="options: MasterViewModel.VMTT.TaskTypeDetail">
   </select>

我的ViewModel和绑定模型：

 var ProjectDS = function (data) {
        var self = this;
        self.ProjectID = ko.observable(data.ProjectID);
        self.ProjectName = ko.observable(data.ProjectName);

    }

    var ProjectModel = function (Projects) {
        var self = this;
        self.Projects = ko.observableArray(Projects);

        $.ajax({
            url: "CreateTask.aspx/GetTaskProjects",
            // Current Page, Method  
            data: '{}',
            // parameter map as JSON  
            type: "POST",
            // data has to be POSTed  
            contentType: "application/json; charset=utf-8",
            // posting JSON content      
            dataType: "JSON",
            // type of data is JSON (must be upper case!)  
            timeout: 10000,
            // AJAX timeout  
            success: function (Result) {
                var MappedProjects =
              $.map(Result.d,
       function (item) { return new ProjectDS(item); });
                self.Projects(MappedProjects);
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }

        });
    };


    var TaskTypeDS = function (data) {
        var self = this;
        self.TaskTypeID = ko.observable(data.TaskTypeID);
        self.TaskTypeDetail = ko.observable(data.TaskTypeDetail);

    }

    var TaskTypeModel = function (TaskTypes) {
        var self = this;
        self.Projects = ko.observableArray(TaskTypes);

        $.ajax({
            url: "CreateTask.aspx/GetTaskTypes",
            // Current Page, Method  
            data: '{}',
            // parameter map as JSON  
            type: "POST",
            // data has to be POSTed  
            contentType: "application/json; charset=utf-8",
            // posting JSON content      
            dataType: "JSON",
            // type of data is JSON (must be upper case!)  
            timeout: 10000,
            // AJAX timeout  
            success: function (Result) {
                var MappedTaskType =
              $.map(Result.d,
       function (item) { return new TaskTypeDS(item); });
                self.Projects(MappedTaskType);
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }

        });
    };



    var MasterViewModel = {
            VMPR: new ProjectModel(),
            VMTT: new TaskTypeModel()
        }


    $(document).ready(function () {
        ko.applyBindings(MasterViewModel);
    })

最后，这是我得到的JSON：

{
"VMPR": {
    "Projects": [
        {
            "ProjectID": 1,
            "ProjectName": "Dummy Project"
        },
        {
            "ProjectID": 3,
            "ProjectName": "Dummy Project2"
        }
    ]
},
"VMTT": {
    "Projects": [
        {
            "TaskTypeID": 1,
            "TaskTypeDetail": "Documentation"
        },
        {
            "TaskTypeID": 2,
            "TaskTypeDetail": "Development"
        },
        {
            "TaskTypeID": 3,
            "TaskTypeDetail": "Planning"
        },
        {
            "TaskTypeID": 4,
            "TaskTypeDetail": "Integration"
        },
        {
            "TaskTypeID": 5,
            "TaskTypeDetail": "Deployment"
        },
        {
            "TaskTypeID": 6,
            "TaskTypeDetail": "Testing"
        }
    ]
}
}

Answer 1

你几乎就在那里，你只需要将视图模型的正确属性绑定到每个选择，然后set which property用于文本以及用作值：

<select data-bind="options: VMPR.Projects, optionsText: 'ProjectName', optionsValue: 'ProjectID', optionsCaption: 'Choose...'"></select>

<select data-bind="options: VMTT.Projects, optionsText: 'TaskTypeDetail', optionsValue: 'TaskTypeID', optionsCaption: 'Choose...'"></select>

您还需要展平视图模型，因此您没有两个嵌套的视图模型：

var ProjectModel = function (Projects) {
    var self = this;
    self.Projects = ko.mapping.fromJS(Projects);
};


var TaskTypeModel = function (TaskTypes) {
    var self = this;
    self.Projects = ko.mapping.fromJS(TaskTypes);
}

$(function () {
var MasterViewModel = {
    VMPR: ko.mapping.fromJS(data.VMPR),
    VMTT: ko.mapping.fromJS(data.VMTT)
};
    ko.applyBindings(MasterViewModel);
})

工作示例here

要使用两个ajax调用：

var TaskTypeModel = function (TaskTypes) {
    var self = this;
    self.Projects = ko.observableArray(TaskTypes);

    $.ajax({
        url: "CreateTask.aspx/GetTaskTypes",
        // Current Page, Method  
        data: '{}',
        // parameter map as JSON  
        type: "POST",
        // data has to be POSTed  
        contentType: "application/json; charset=utf-8",
        // posting JSON content      
        dataType: "JSON",
        // type of data is JSON (must be upper case!)  
        timeout: 10000,
        // AJAX timeout  
        success: function (Result) {
            ko.mapping.fromJS(Result, self.Projects);
        },
        error: function (xhr, status) {
            alert(status + " - " + xhr.responseText);
        }

    });
};

使用多个ViewModel时如何使用knockout数据绑定元素

1 个答案: