C# 带有映射插件的淘汰视图模型

我试图弄清楚如何在视图模型中使用Knockout映射引擎

如果我的服务器端视图模型如下所示：

public class InventoryIndexViewModel
{
    public bool IsDeleteReceiverButtonVisible { get; set; }
    public IList<Receiver> Receivers { get; set; }

    public string ReceiversAsJson
    {
        get
        {
            var jsonSerializerSettings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };

            var receivers = JsonConvert.SerializeObject(this.Receivers, jsonSerializerSettings);

            return receivers;
        }
    }

}

public class Receiver
{
    public Cooperative Cooperative { get; set; }
}

public class Cooperative
{
    public int Id { get; set; }
    public string Name { get; set; }
}

@model InventoryIndexViewModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Inventory List";
}

@section scripts{
    <script>
        $(function() {
            var inventoryViewModel = function() {

                var self = this;

                self.isDeleteButtonVisible = function() { return @Model.IsDeleteReceiverButtonVisible.ToString().ToLower(); }();
                self.receivers = ko.observableArray(@Html.Raw(Model.ReceiversAsJson));
            };

            ko.applyBindings(new inventoryViewModel());
        });
    </script>
}

<div class="col-md-10">
    <br />
    <table class="table table-striped">
        <tbody data-bind="foreach: receivers">
            <tr>
                <td data-bind="text: serialNumber"></td>
                <td data-bind="text: cooperative.Name"></td>
            </tr>
        </tbody>
    </table>
</div>

协作属性是一个如下所示的对象：

public class InventoryIndexViewModel
{
    public bool IsDeleteReceiverButtonVisible { get; set; }
    public IList<Receiver> Receivers { get; set; }

    public string ReceiversAsJson
    {
        get
        {
            var jsonSerializerSettings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };

            var receivers = JsonConvert.SerializeObject(this.Receivers, jsonSerializerSettings);

            return receivers;
        }
    }

}

public class Receiver
{
    public Cooperative Cooperative { get; set; }
}

public class Cooperative
{
    public int Id { get; set; }
    public string Name { get; set; }
}

@model InventoryIndexViewModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Inventory List";
}

@section scripts{
    <script>
        $(function() {
            var inventoryViewModel = function() {

                var self = this;

                self.isDeleteButtonVisible = function() { return @Model.IsDeleteReceiverButtonVisible.ToString().ToLower(); }();
                self.receivers = ko.observableArray(@Html.Raw(Model.ReceiversAsJson));
            };

            ko.applyBindings(new inventoryViewModel());
        });
    </script>
}

<div class="col-md-10">
    <br />
    <table class="table table-striped">
        <tbody data-bind="foreach: receivers">
            <tr>
                <td data-bind="text: serialNumber"></td>
                <td data-bind="text: cooperative.Name"></td>
            </tr>
        </tbody>
    </table>
</div>

我的观点是这样的：

public class InventoryIndexViewModel
{
    public bool IsDeleteReceiverButtonVisible { get; set; }
    public IList<Receiver> Receivers { get; set; }

    public string ReceiversAsJson
    {
        get
        {
            var jsonSerializerSettings = new JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            };

            var receivers = JsonConvert.SerializeObject(this.Receivers, jsonSerializerSettings);

            return receivers;
        }
    }

}

public class Receiver
{
    public Cooperative Cooperative { get; set; }
}

public class Cooperative
{
    public int Id { get; set; }
    public string Name { get; set; }
}

@model InventoryIndexViewModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Inventory List";
}

@section scripts{
    <script>
        $(function() {
            var inventoryViewModel = function() {

                var self = this;

                self.isDeleteButtonVisible = function() { return @Model.IsDeleteReceiverButtonVisible.ToString().ToLower(); }();
                self.receivers = ko.observableArray(@Html.Raw(Model.ReceiversAsJson));
            };

            ko.applyBindings(new inventoryViewModel());
        });
    </script>
}

<div class="col-md-10">
    <br />
    <table class="table table-striped">
        <tbody data-bind="foreach: receivers">
            <tr>
                <td data-bind="text: serialNumber"></td>
                <td data-bind="text: cooperative.Name"></td>
            </tr>
        </tbody>
    </table>
</div>

@model InventoryIndexViewModel
@{
Layout=“~/Views/Shared/_Layout.cshtml”；
ViewBag.Title=“库存清单”；
}
@节脚本{
$（函数（）{
var inventoryViewModel=函数（）{
var self=这个；
self.isDeleteButtonVisible=function（）{return@Model.IsDeleteReceiverButtonVisible.ToString（）.ToLower（）；}（）；
self.receivers=ko.observearray（@Html.Raw（Model.ReceiversAsJson））；
};
应用绑定（新的inventoryViewModel（））；
});
}

所以问题是，如何处理复杂的接收器对象。在我的视图代码中，我尝试将数据绑定到cooperative.Name，但这不起作用。我猜我需要使用Knockout映射插件，但我在Knockout页面上尝试了语法，并在谷歌上找到了几种不同的语法变体，但我尝试过的似乎都不管用

另一方面，这里显示的代码大大简化了我的实际代码。因此，在这个简化的代码中可能有一个非常简单的方法来通过数据绑定来访问Copy.Name，只需考虑接收器对象是一个具有许多属性的复杂对象，它们本身就是复杂对象，因此，这就是敲除映射引擎在整个对象层次中将所有内容都转换为可观察内容的地方

或者可能不行，我离基地太远了。想法

---

编辑：更新了服务器端视图模型，以正确包含我最初忘记包含的ReceiversAsJson方法。

如果在模型中定义了属性，则可以使用以下映射将模型序列化为json：

Javascript

    var data = @Html.Raw(Json.Encode(Model));
    var viewModel = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);

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

   self.firstNameAndLastName = ko.computed(function() {
        return self.FirstName() + " " + self.LastName();
    }); 

}


var data = {"IsDeleteReceiverButtonVisible":false, "FirstName": "First", "LastName": "Last", "Receivers":[{"Cooperative":{"Id":1,"Name":"aName"}}]};
        var viewModel = new aViewModel(data);
        ko.applyBindings(viewModel);

查看

<table class="table table-striped">
        <tbody data-bind="foreach: Receivers">
            <tr>

                <td data-bind="text: Cooperative.Name"></td>
            </tr>
        </tbody>
</table>

型号

ps我必须在集合中添加一个初始值设定项，即

    public class InventoryIndexViewModel
    {
        public InventoryIndexViewModel()
        {
            Receivers = new List<Receiver>();
        }

        public bool IsDeleteReceiverButtonVisible { get; set; }
        public IList<Receiver> Receivers { get; set; }
    }

    public class Receiver
    {
        public Cooperative Cooperative { get; set; }
    }

    public class Cooperative
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Html

<table class="table table-striped">
        <tbody data-bind="foreach: Receivers">
            <tr>

                <td data-bind="text: Cooperative.Name"></td>
            </tr>
        </tbody>
    </table>
<span data-bind="text:firstNameAndLastName()"></span>

jsFiddle

---

谢谢。我能用你的例子让它工作；但是，我仍然想知道，如果视图模型定义为函数（如我的示例）而不是对象文字，您将如何使用映射插件。@meyousikmann没问题，请查看我的更新。它包括来自模型的序列化（使用JSFIDLE的虚拟数据）和一个计算函数。