将淘汰赛 js 模型视图与来自服务器 mvc 模型的数据绑定答案

【问题标题】：binding knockoutjs modelview with data from server mvc model将淘汰赛 js 模型视图与来自服务器 mvc 模型的数据绑定
【发布时间】：2012-07-03 19:33:28
【问题描述】：

让我们把下面作为我的 MVC 模型类：

public class Candidate
{
    public string FirstName { get; set; }
    public string LastName { get; set; }        
    public string Email { get; set; }
    public int Experience { get; set; }
    public List<Technology> Technologies { get; set; }
}

public class Technology
{
    public string Technology { get; set; }
    public int ExperinceInMonths { get; set; }
}

现在，我有一个返回此模式数据的 web api 方法：

public class CandidateController : ApiController
{
    // GET api/Candidate
    public IEnumerable<Candidate> Get()
    {
        CandidateServiceClient client = new CandidateServiceClient();

        List<Candidate> candidateData = client.GetCandidateData();

        if (candidateData == null || candidateData.Count() == 0)
            throw new HttpResponseException(new HttpResponseMessage(HttpStatusCode.NoContent));

        return candidateData.AsEnumerable(); 
    }
     ...

使用 Knockout 假设我有类似这样的 javascript：

         $.get(url, function (result) {
           candidateViewModel.candidates(result);
           ko.applyBindings(candidateViewModel); 
       }); 
    });

 var candidateViewModel = { candidates:  ko.observableArray([])};

在此背景下，我的问题是如何构建具有嵌套集合的淘汰视图模型？（如本例中的技术集合。）

寻找类似的东西..

var myViewModel = { 名字：ko.observable(''), 姓氏：ko.observable(''), .. };

非常感谢任何帮助...

【问题讨论】：

标签： knockout.js asp.net-mvc-4 asp.net-web-api knockout-2.0

【解决方案1】：

在我看来，你应该使用ko.mapping.fromJS，以防模型变得非常复杂，你不需要改变你的视图模型。

参考：http://knockoutjs.com/documentation/plugins-mapping.html

【讨论】：

【解决方案2】：

这个输出非常混乱，但它说明了这个想法。这里的事情是在你的 javascript 中有 Candidate 和 Technology 模型，并使用 arrayMap 调用它们的构造函数。这里是the fiddle。注意：如果您不打算更改模型的值，则模型不需要具有 observables 属性。

型号：

var Technology = function(name, monthsExperience){
    this.name = ko.observable(name);
    this.monthsExperience = ko.observable(monthsExperience);
};

var Candidate = function(data){

    this.firstName = ko.observable(data.FirstName || '');
    this.lastName = ko.observable(data.LastName || '');
    this.email = ko.observable(data.Email || '');
    this.experience = ko.observable(data.Experience || '');

    this.technologies = ko.observableArray(ko.utils.arrayMap(data.Technologies || [],
        function(i){
            return new Technology(i.Technology, i.ExperinceInMonths);
        }));
};

主视图模型：

var App = function(initialData){
    this.candidates = ko.observableArray(ko.utils.arrayMap(initialData|| [],
        function(i){
            return new Candidate(i);
        }));
};

【讨论】：

感谢您的指正。我刚刚应用了更正。你的回答对我来说更有意义。请让我试试这个。谢谢！