在 MVC 4 中使用 Knockout MVC 将数据与嵌套对象绑定答案

【问题标题】：Bind data with nested object using Knockout MVC in MVC 4在 MVC 4 中使用 Knockout MVC 将数据与嵌套对象绑定
【发布时间】：2013-07-28 22:10:11
【问题描述】：

我正在使用来自here 的Knockout MVC 将淘汰赛集成到我的网站，但我遇到了问题。如果我的模型包含另一个对象，则绑定将不成功。例如，这是我的模型：

public class HelloWorldModel
{
    public string FirstName { get; set; }
    public string LastName { get; set; }

    [Computed]
    public string FullName
    {
        get { return FirstName + " " + LastName; }
    }

    public ProductModel ProductModel { get; set; }
}

这是我的ProductModel

public class ProductModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public int CategoryId { get; set; }
    public bool IsActive { get; set; }
}

这些模型仅用于测试，因此非常简单。这是我要展示的视图：

@using PerpetuumSoft.Knockout
@model MyStore.UI.Models.HelloWorldModel

@{
    ViewBag.Title = "HelloWorld";
    var ko = Html.CreateKnockoutContext();
}

<p>
    Name: @ko.Html.TextBox(x => x.ProductModel.Name)
</p>
<p>
    Price: @ko.Html.TextBox(x => x.ProductModel.Price)
</p>
<h2>
    Product @ko.Html.Span(x => x.ProductModel.Name), @ko.Html.Span(x => x.ProductModel.Price)
</h2>

<p>First name: @ko.Html.TextBox(m => m.FirstName)</p>
<p>Last name: @ko.Html.TextBox(m => m.LastName)</p>
<h2>Hello, @ko.Html.Span(m => m.FullName)!</h2>

@ko.Apply(Model)

但是失败了。什么都没有出现。 <input/> 是空白的，<span> 也是如此。这里有什么问题？我想绑定上下文有问题。请帮我。非常感谢。

已编辑！这是自动生成的 HTML 的一部分：

绑定：

Name: <input data-bind="value : ProductModel().Name" />

视图模型：

var viewModelJs = {"FirstName":"AAA","LastName":"BBB","FullName":"AAA BBB","ProductModel":{"Id":0,"Name":"Coca Cola","Price":123.0,"CategoryId":0,"IsActive":false}};

【问题讨论】：

提示一下，Knockout MVC 是一个巨大的反模式。不要这样做。它是 Web Forms 的混蛋。我们一直在努力摆脱 Web 表单，KO MVC 将我们带回来
但是现在，我不得不使用它:(
这是 Knockout MVC 库的一个已知且令人遗憾的未解决问题，请参阅：data-bind attribute for Nested object is invalid 作为解决方法，可以使用 with 绑定：@using (var subModel = ko.With(m => m.ProductModel)) { @subModel.Html.TextBox(x => ko.Model..Name)
感谢您的建议，我已经找到了解决方案。伟大的！让我来回答吧:)

标签： asp.net-mvc-4 knockout.js knockout-mvc

【解决方案1】：

感谢nemesv 的评论，我找到了解决方案。要访问嵌套对象，这里是Product，我们使用With 绑定。这是视图的代码：

@using (var product = ko.With(x => x.ProductModel))
{
    <p>
        Name: @product.Html.TextBox(x => x.Name)
    </p>
    <p>
        Price: @product.Html.TextBox(x => x.Price)
    </p>
    <h2>
        Product @product.Html.Span(x => x.Name), @product.Html.Span(x => x.Price)
    </h2>
}

<p>First name: @ko.Html.TextBox(m => m.FirstName)</p>
<p>Last name: @ko.Html.TextBox(m => m.LastName)</p>
<h2>Hello, @ko.Html.Span(m => m.FullName)!</h2>

【讨论】：