将MVC模型转换为Knockout JS ViewModel

时间:2015-01-29 19:16:58

标签: javascript asp.net-mvc json asp.net-mvc-4 knockout.js

我正在尝试将我的mvc模型转换为knockout viewmodel:

模型

public class MyModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    .
    .
    .
    public List<MyList1> MyListOne{ get; set; }
    public List<MyList2> MyListTwo{ get; set; }  
}

控制器

public ActionResult Index()
{
      MyModel myModel;

      var myServiceObject = myServiceManager.GetMyModelByUser(user);

      myModel = new MyModel
      {
        Id = myServiceObject.Id,
        .
        . 
        .
        .
      };

      return View(myModel);  
}

查看模型

var DynamicModelLoading = function (data) {
    var self = this;

    ko.mapping.fromJS(data, {}, self);

};

辅助

public static string ToJson(this object obj)
        {
            JsonSerializerSettings serializerSettings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };

            return JsonConvert.SerializeObject(obj, Formatting.None, serializerSettings);
        }

视图

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script type="text/javascript">
    var viewModel;

    $(function () {
            var viewModel = new DynamicModelLoading(@Html.Raw(Model.ToJson()));            
            ko.applyBindings(viewModel);
   });
</script>

<div class="f_name" data-bind="text: FirstName"></div>
<div class="f_name" data-bind="text: LastName"></div>

ToJson()返回数据。但在绑定它时,我没有收到任何错误,也没有数据。我在这里遗漏了一些东西,但不确定它是什么。


答案

以下是修复:

<div class="f_name" data-bind="text: firstName"></div>
<div class="f_name" data-bind="text: lastName"></div>

我期望属性名称与我的mvc模型相同,但Json Serializer默认将大写的第一个字母转换为小写。

2 个答案:

答案 0 :(得分:1)

该问题必须与来自@ Html.Raw(Model.ToJson()))的JSON结果有关;

为了稍微使用代码,我创建了这个小提琴,似乎正确地映射数据,并成功将其绑定到视图:http://jsfiddle.net/4Lu8fdx2/

以下是JavaScript代码:

var DynamicModelLoading = function (data) {
    var self = this;

    ko.mapping.fromJS(data, {}, self);
};

$(function () {
    var viewModel = new DynamicModelLoading({"testProperty":"testValue"});

    ko.applyBindings(viewModel);
});

这成功地将传递给“DynamicModelLoading()”的静态JSON绑定到视图中的HTML。这是HTML:

<h4>Value For 'testProperty'</h4>
<span data-bind="text: testProperty"></span>

在调用'applyBindings()之前将viewModel记录到控制台会发生什么?它是否包含原始JSON对象中配置为observables(函数)的所有属性?当我记录viewModel时,这就是我得到的:

DynamicModelLoading {testProperty: function, __ko_mapping__: Object}

如果映射成功运行,您应该得到类似的结果,但是包含对象的所有属性。

答案 1 :(得分:0)

    var viewModel;     $(函数(){             var viewModel = new DynamicModelLoading(JSON.parse('@ Html.Raw(Json.Encode(Model))'));;             ko.applyBindings(viewModel);    });