Search code examples
javascriptknockout.jsbreezedurandal-2.0

Knockout binding failed


Starting to pull my hair off! I am creating an object using Breeze (the metadata is coming from a web api server).

The server side looks like this:

public class Product
{
    public int ProductId { get; set; }
    public String Name { get; set; }
    public String Description { get; set; }
}

On the client side, I create an entity using Breeze:

var product = ko.observable();
product(manager.createEntity('Product', {name:'', description:''}));

On the UI, I have the following:

<div class="modal-body">
    <input type="text"" class="form-control"  data-bind="value: name" >
    <textarea class="form-control" data-bind="value: description"></textarea>
</div>

The problem is: knockout binds to the name no problem but not to the description! Here is what I get in the console:

Unable to process binding "value: function (){return description }" Message: description is not defined;

What I don't get is: the product is properly created and contains all needed properties as shown in Chrome debug view:

enter image description here


Solution

  • Make sure to bind to the proper context. As @nemesv pointed out in the comments using a console.log() function directly inside of your textarea should be sufficient to find what properties are available.

    Given that you are using Durandal 2.0 you can also see what is available in the bound context using the console. Durandal's system logger actually outputs the currently bound context directly into the console. It appears to show you which module was loaded and the context of that module.

    Binding views/patients/overview/index > Object { activate: function }
    

    Expanding the object will show you what is currently available as well as any child properties.