How to databind into html control asp.net mvc razor by using knockout.js?

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>

You call ko.applyBindings inside an inner $(document).ready but you already in the ready event. Just write ko.applyBindings(new AppViewModel()); and it should work fine. — nemesv
– nemesv, Commented Jan 19, 2013 at 14:50

phnkha · Accepted Answer · 2013-01-19 14:52:10Z

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.

Collectives™ on Stack Overflow

How to databind into html control asp.net mvc razor by using knockout.js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related