Knockout not updating view when model is updated when using click binding

Question

I'm using knockout 3.0 in an MVC5 application, along with knockout.mapping (v2.4.1) library.

When a button is clicked I want a knockout viewModel property to be updated, and the associated control's values updated as well.

The following is a condensed proof of concept from my larger project that doesn't seem to work properly.

The view:

        <div class="col-md-6">
        Has College:
        <button data-bind="click: hasCollege">Yes</button>
        <button data-bind="click: function () { LevelOfEducation = 'High School'; console.log('Updated LOE: ' + $data.LevelOfEducation) }">No</button>

        <select data-bind="value: LevelOfEducation" id="LevelOfEducation" name="LevelOfEducation">
            <option value="">Please Select</option>
            <option value="GED">GED</option>
            <option value="High School">High School</option>
            <option value="0-23 College Credits">0-23 College Credits</option>
            <option value="24-47 College Credits">24-47 College Credits</option>
            <option value="Associate's Degree">Associate's Degree</option>
            <option value="Bachelor's Degree">Bachelor's Degree</option>
            <option value="Master's Degree">Master's Degree</option>
            <option value="Doctoral Degree">Doctoral Degree</option>
        </select>
        <br />
        <br />
        <input type="text" data-bind="value: YearObtainedHSGED" />
        <select data-bind="value: YearObtainedHSGED" id="YearObtainedHSGED" name="YearObtainedHSGED">
            <option value="">Please Select</option>
            <option value="2014">2014</option>
            <option value="2013">2013</option>
            <option value="2012">2012</option>
            <option value="2011">2011</option>
            <option value="2010">2010</option>
        </select>
    </div>

And here's the Javascript:

    // Condensed ViewModel from MVC Controller.
    var model = {
        'LevelOfEducation': 'High School',
        'YearObtainedHSGED': '2011'
    }
    var viewModel = ko.mapping.fromJS(model);

    viewModel.hasCollege = function (data, event) {
        console.log("Current LOE: " + ko.unwrap(data.LevelOfEducation));
        viewModel.LevelOfEducation = '0-23 College Credits';

        // Also tried:
        // data.LevelOfEducation = '0-23 College Credits';

        console.log("Updated LOE: " + viewModel.LevelOfEducation);
        console.log($("#LevelOfEducation").val()) // This value never changes when the buttons are clicked.
    }

    ko.applyBindings(viewModel);

The first two buttons and the first drop down menu are bound to the viewModel property "LevelOfEducation". When the viewModel property changes knockout SHOULD update the drop down list. The drop downs are pre-populated with values from the razor view model. When "Yes" is clicked, the value should change to the selected option "0-23 College Credits". And when "No" is clicked, it should change the value back to "High School". According to the console logs, the model value is changing, but the control is not updating.

To compare, i have a YearObtainedHSGED-bound textbox and drop down menu. When one value is changed, it updates the other control appropriately.

How do I make the LevelOfEducation drop down update when the Yes/No buttons are clicked?

JSFiddle for example

Bryan Bryan · Accepted Answer · 2014-08-13T23:03:53

I figured it out.

When changing properties on a knockout viewModel you should use:

viewModel.Property('new value');

instead of what i was using:

viewModel.Property = 'new value'; // no worky

Knockout not updating view when model is updated when using click binding

1 Answers