1

現在、結合した 2 つのビューモデルがあります。この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"
        }
    ]
}
}
4

1 に答える 1

3

ビューモデルの正しいプロパティを各選択にバインドし、テキストに使用するプロパティと値として使用するプロパティを設定するだけです。

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

また、ビュー モデルをフラット化する必要があるため、2 つの入れ子になったビューモデルがなくなります。

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);
})

作業例はこちら

これを 2 つの 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);
        }

    });
};
于 2013-02-09T12:13:33.747 に答える