knockoutmvc - unable to parse bindings

Question

I have an ASP.NET MVC site and I am trying to get knockout-mvc working with it.

I have created a View Model in the C# code called Refund that contains among other things a Voucher called Vouchertype and a List<Country> called Countries. Voucher has a variable of type int called VoucherNumber

This View Model is passed into a strongly defined view Refund\Index

I am trying to get knockout-mvc to bind the values in Refund.Voucher.VoucherNumber to a textbox, and the Values in Refund.Countries to a drop-down list. On the controller I have hardcoded the values of Voucher.Vouchernumber and added two countries to the Country list.

Here is my View Code:

@using Resources
@using PerpetuumSoft.Knockout
@model MVC.Models.RefundViewModel
@{
    var ko = Html.CreateKnockoutContext();
}

<div id="refundformcontainer">
    <div id="headersection">
        <div id="pagetitlecontainer">@Language.RefundVouchers</div>
        <div id="helpercontainer">
            <label id="lblhelper">To begin enter a voucher number or scan a barcode</label>
        </div>
    </div>

    <div id="vouchercontainer">
        <div id="voucherdetailscontainer">
            <h5>@Language.VoucherDetails</h5>
            <div id="vouchernumbercontainer" class="initialvoucherfield">
                @Html.LabelFor(x=>x.Voucher.VoucherNumber)
                @ko.Html.TextBox(x=>x.Voucher.VoucherNumber)
            </div>
            <div id="countrycontainer" class="initialvoucherfield">
                @Html.LabelFor(x=>x.Voucher.Country)
                <select ko.Bind.Options(x=>x.Countries).OptionsText("Name").OptionsValue("CountryId").Value(x=>x.Voucher.CountryId) ></select>
            </div>
        </div>
    </div>
</div>
@ko.Apply(Model);

When the page loads, neither controls are bound to.

When I look at the generated source the following code is generated

<script type="text/javascript">
    var viewModelJs = {"Refund":null,"Voucher":{"VoucherId":0,"VoucherNumber":123456789,"Country":null,"CountryId":0,"Retailer":null,"RetailerId":0,"PurchaseDate":"0001-01-01T00:00:00","CustomsStampDate":null,"InvoiceNumber":"","LineItems":[],"TotalPurchasePrice":0.0},"Countries":[{"CountryId":380,"Name":"Italy"},{"CountryId":724,"Name":"Spain"}]};
    var viewModel = ko.mapping.fromJS(viewModelJs);
    ko.applyBindings(viewModel);
</script>

knockout-2.2.0.js and knockout.mapping-latest.js are both included in the page

The error I am getting is

0x800a139e - JavaScript runtine error: Unable to parse bindings
Message: [Object Error]
Bindings value: Voucher().VoucherNumber

I then changed the Refund View model so it had a property VoucherNumber and had the textbox reference this instead of the Voucher.VoucherNumber property

@ko.Html.TextBox(x=>x.VoucherNumber)

When I ran this I got the same unable to parse bindings error, but this time for the country

Bindings value: options : Countries, optonsText : Name, optionsValue : CountryId

Does anybody have any idea what is causing this?

Knockout-mvc currently has a bug so nested properties (e.g `x.Voucher.VoucherNumber`) are not wroking correctly see this duplicate? question for a workaround: http://stackoverflow.com/questions/17918628/bind-data-with-nested-object-using-knockout-mvc-in-mvc-4 — nemesv, Aug 02 '13 at 11:37
Thanks, thats a pretty bad bug! Your link has led me to read up a bit more and find this http://stackoverflow.com/questions/11618042/is-there-a-reason-i-would-use-knockout-mvc-instead-of-knockout-js - not so sure I will use it now! — Neil, Aug 02 '13 at 11:45
I don't see knockout-mvc that bad as Tyrsius in the linked question, it has some problems and limitations but comparing it to webforms is too strong. If you know knockout and anyway using ASP.NET MVC and you like to have storngly typed views and kncockout databinding expressions and you know what you are doing then it is not that bad. — nemesv, Aug 02 '13 at 11:51
My biggest problem with knockout mvc: it seems that the project is a little bit abandoned. There is not too much activity on github lately... this bug is open since 8 mounts... — nemesv, Aug 02 '13 at 11:57
Yeah it seems odd to me that a simple thing like a nested property doesn't work. That worries me more than anything — Neil, Aug 02 '13 at 12:10
@nemesv I didn't mean to imply that it was as bad as webforms, just that it makes the sacrifice webforms does: server round trips to avoid writing javascript in favor of writing C#. Webforms and knockout-mvc both let you write C# by having all the behavior run on the server. It introduces a lot of round trips, robbing you of performance and perceived snappiness. — Kyeotic, Aug 02 '13 at 15:25

score 0 · Answer 1 · answered Sep 16 '15 at 08:14

0

i think, this should work.

<select @ko.Bind.Options(x=>x.Countries).OptionsText("'Name'").OptionsValue("'CountryId'").Value(x=>x.Voucher.CountryId) ></select>

answered Sep 16 '15 at 08:14

Akkarapon S.

31
3

knockoutmvc - unable to parse bindings

1 Answers1