CODEWITHSUNDEEP
javascriptmvvmknockout.jsknockout-2.0knockout-mvc
Dani
Dani

Reputation: 700

Knockout js values not binded

I have my code as follows:

Html:

<select 
    name="data3"
    size="1" 
    id="data3"
    data-bind="options: datalist, value: profile().dat.data()[2].Value()">
</select>

JavaScript:

$(function()
{
    clientviewmodel = viewmodel();
    ko.applyBindings(clientviewmodel);
});

function viewmodel()
{
    var self = this;
    self.profile = ko.observable(ko.mapping.fromJS($.parseJSON(datareceived)));
}

Json:

{ "dat": {"data": [{"Value":"1"}, {"Value":"2"}, {"Value":"3"} ] } }

My problem is, value is not binded on changing the select control.

Upvotes: 1

Views: 111

Answers (3)

ebohlman
ebohlman

Reputation: 15003

Because you've written viewmodel() as a "classical" constructor but you don't instantiate it with new, you're actually setting profile as a global variable and not returning anything when you call it and therefore not actually applying bindings to your VM.

Standard JavaScript practice is that names of classical constructors, and only those names, should start with a capital letter to remind you that you need to instantiate them with new.

nemesv's and Neil Thomspson's observations also apply; you shouldn't be unwrapping value in your binding, and datalist needs to be a property of your VM.

Upvotes: 1

nemesv
nemesv

Reputation: 139798

You have an extra set of () at the end of your binding.

The correct binding should look like:

<select 
    name="data3"
    size="1" 
    id="data3"
    data-bind="options: datalist, value: profile().dat.data()[2].Value">
</select>

Demo JSFiddle.

With writing Value() you are not binding to your observable property itself but to its underlying value which makes your binding one-way.

Upvotes: 2

Neil Thompson
Neil Thompson

Reputation: 6425

Your profile JSON is invalid.

you have

{
    "dat"{
        "data"[
            {
                "Value": "1"
            },
            {
                "Value": "2"
            },
            {
                "Value": "3"
            }
        ]
    }
}

it should be:

{
    "dat": {
        "data": [
            {
                "Value": "1"
            },
            {
                "Value": "2"
            },
            {
                "Value": "3"
            }
        ]
    }
}

JsonLint.com is a useful tool in these cases

Upvotes: 0

Related Questions