Question

Hi; i try to learn knockout.js using asp.net mvc razor. i have been written some codes below but http://localhost:56238/Contact/SendMessage is empty. i see only html control. How to bind ViewModel to UI by using knockout.js

@{
    ViewBag.Title = "SendMessage";
}

<h2>SendMessage</h2>

<script src="/Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">


    $(document).ready(function () {


        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");

            this.fullName = ko.computed(function () {
                return this.firstName() + " " + this.lastName();
            }, this);

            this.capitalizeLastName = function () {
                var currentVal = this.lastName();        // Read the current value
                this.lastName(currentVal.toUpperCase()); // Write back a modified value
            };


            $(document).ready(function () { ko.applyBindings(new AppViewModel()); })
        }



    });
</script>

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps</button>

Answer 1

ko.applyBindings never executed in your code, you must put it somewhere outside the ViewModel. “this” in computed not gonna work because it does not point to the view model.

It should be something like this:

<script type="text/javascript">
    function AppViewModel() {
            var self = this;

            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");

            this.fullName = ko.computed(function () {
                return self.firstName() + " " + self.lastName();
            }, this);

            this.capitalizeLastName = function () {
                var currentVal = this.lastName();        // Read the current value
                this.lastName(currentVal.toUpperCase()); // Write back a modified value
            };
        }

    $(document).ready(function () {
        ko.applyBindings(new AppViewModel()); 
    });
</script>

One more thing, I see you’re using jquery without including jquery lib.