Bind data with nested object using Knockout MVC in MVC 4

Question

I'm using Knockout MVC from here to integrate knockout to my website, but I have a problem. If my model contains another object, the binding will be unsuccessful. For example, here is my model:

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; }
}

And here is my 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; }
}

These models are just for testing, so they're very simple. Here is my view to display:

@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)

But it's failed. Nothing appeared. <input/> is blank, so does the <span>. What's the wrong thing here? I guess something's wrong at binding context. Please help me. Thank you so much.

Editted! Here is part of the auto-generated HTML:

The binding:

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

The view model:

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

Just a tip, Knockout MVC is a huge anti pattern. Dont do it. Its the bastard child of Web Forms. We have worked so hard to get away from Web forms and KO MVC brings us back — Anders
– Anders, Commented Jul 29, 2013 at 7:57
This is a known and sadly open of issue of the Knockout MVC library see: data-bind attribute for Nested object is invalid as a workaround use can use the with binding: @using (var subModel = ko.With(m => m.ProductModel)) { @subModel.Html.TextBox(x => ko.Model..Name) — nemesv
– nemesv, Commented Jul 29, 2013 at 8:47
Thanks for your suggestion, I've found the solution. Great! Let's me answer it :) — Triet Doan
– Triet Doan, Commented Jul 29, 2013 at 9:18

Triet Doan · Accepted Answer · 2013-07-29 09:21:13Z

1

Thanks to nemesv's comment, I've found the solution. To access the nested object, here is Product, we use With binding. Here is the code for the view:

@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>

answered Jul 29, 2013 at 9:21

Triet Doan

12.2k9 gold badges42 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bind data with nested object using Knockout MVC in MVC 4

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related