将 MVC 模型转换为 Knockout JS ViewModel

Posted 2023-03-27

【中文标题】将 MVC 模型转换为 Knockout JS ViewModel

【英文标题】：Converting MVC Model to Knockout JS ViewModel

【发布时间】：2015-03-29 03:43:31

【问题描述】：

我正在尝试在这里将我的 mvc 模型转换为淘汰视图模型：

型号

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 默认将大写的第一个字母转换为小写。

【问题讨论】：

希望这里有帮助***.com/questions/11628938/…

【参考方案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 对象的所有属性？当我记录 viewModel 时，这就是我得到的：

DynamicModelLoading testProperty: function, __ko_mapping__: Object

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

【讨论】：

没问题，希望对您有所帮助！

【参考方案2】：

变量视图模型； $（函数（） var viewModel = new DynamicModelLoading(JSON.parse('@Html.Raw(Json.Encode(Model))')); ko.applyBindings(viewModel); );