来自 MVC 的 Knockout 映射答案

【问题标题】：Knockout mapping from MVC来自 MVC 的 Knockout 映射
【发布时间】：2016-08-28 12:16:33
【问题描述】：

我使用 ko.mapping 实用程序将我的 mvc 模型绑定到 knockoutjs。我的mvc模型是这样的

  public class Person
  {
    public string Name { get; set; }
    public string Surname { get; set; }
    public Achievement[] achievements { get; set; }
  }

  public class Achievement
  {
     public string Title { get; set; }
     public int Score { get; set; }
  }


  public ActionResult Index()
  {
     Person person = new Person
     {
        Name = "Name",
        Surname = "Surname",

        achievements = new Achievement[]
        {
           new Achievement { Title="Ach 1", Score=10 },
           new Achievement { Title="Ach 2", Score=11 },
           new Achievement { Title="Ach 3", Score=12 },
        }
     };
     return View(person);
  }

我希望我的 javascript 模型在 Person 和 Achievement 对象中都包含一些额外的属性，因此我使用了敲除映射插件并仅在 javascript 中编写新属性（Person.fullName 和 Achievement.Message）。

@{
    string theData = new JavaScriptSerializer().Serialize(Model);
 }
  <div>
    <div><label>Name </label> <span data-bind="text:Name"></span></div>
    <div> <label>Surname </label> <span data-bind="text:Surname"></span> </div>
    <div> <label>Full Name </label> <span data-bind="text:fullName"></span></div>

    <ul data-bind="foreach:achievements">
        <li>
            <span data-bind="value:Title" />
            <span data-bind="text:Score"></span>
            <span data-bind="text:Message"></span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    personViewModel = function (data) {
        var self = this;
        ko.mapping.fromJS(data, {}, self);  
        self.fullName = ko.computed(function () {
            return self.Name() + "   " + self.Surname();
        });
    }

    achievement = function (data) {
        var self = this;
        ko.mapping.fromJS(data, {}, self);

        self.Message = ko.computed(function () {
            return self.Title() + "  " + self.Score();
        });
    }
    ko.applyBindings(new personViewModel(@Html.Raw(theData)));
</script>

问题是成就等级根本没有映射。什么是从 MVC 控制器加载数据而无需在 c# 和 javascript 中编写两次模型的正确方法。

【问题讨论】：

标签： javascript c# asp.net-mvc knockout.js knockout-mapping-plugin

【解决方案1】：

你可以试试这样的：

var custMap = {};

custMap['achievements'] = {
 create: function(data) {
  var result = [];
  for(var i = 0; i < data.length; i++){
   result.push(new achievement(data[i]);
  }
  return new ko.observableArray(result);
 }
}

并映射它：

ko.mapping.fromJS(data, custMap, self);

【讨论】：

我尝试了您的代码并收到此错误。 '标题未定义'。
@albert 现在尝试注释掉 self.Message 看看它是否有效？为了让事情变得更容易，你可以在 chrome 的控制台中调试代码，断点它
create 函数获取的不是整个数组，而是它的各个元素。使用create: function(options) { return new achievement(options.data) }（例如：jsfiddle.net/8ma2Lg12）
@user3297291 你能编辑这个吗：jsfiddle.net/9pmg1yma/2 所以我把它复制到我的项目中。由于包含剃须刀代码，因此无法在小提琴中运行。
@albert，你最好试着真正理解你在写什么，而不是要求我们修复东西。你忘了在achievement 中映射成就数据，你忘了定义self。 jsfiddle.net/ofh9jupn