當使用多個ViewModels如何使用挖空數據綁定元素

Question

我目前有2個我合併的viewmodels。現在我想將這個MasterViewModel數據綁定到頁面中的元素，但不知道如何。

這裏是我的HTML：

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

我的ViewModels，並結合模型

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使用f或文本，其中作爲值使用：

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

您還需要扁平化你的視圖模型，所以你不要有兩個嵌套的ViewModels：

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

    }); 
};