Knockout.js unable to update server database

Question

The following is my single page app using Knockout.js and MVC WebApi. I have no problem getting the data from WebApi service. However, I can't neither do a PUT nor a POST to the server. When I click the Update button which is bound to self.update(), it always says "baseApiUri/api/user/undefined". I thought the self.user(new userViewModel(user)) line would set the scope of the current user record, but it doesn't seem to be the case. I'd like to use the userViewModel instead of hard code the getting and setting of each of the properties in the user observable object. Thank you for your help.

@model App4MVC4.Controllers.UserViewModel

@section scripts{
    <script type="text/javascript">
        function viewModel() {
            var baseApiUri = "@Model.apiBaseUrl";

            var self = this;

            /********** nested view model **********/
            function userViewModel(user) {
                var self = this;
                self.user_ID = user.user_ID;
                self.firstName = user.firstName;
                self.lastName = user.lastName;
                self.long_name = ko.computed(function(){return self.firstName + " " + self.lastName});
                self.Login = user.Login;
                self.dateAdded = user.dateAdded;
                self.email = user.email;
                self.alertOptIn = user.alertOptIn ? "Yes" : "No";
                self.active = user.active ? "Yes" : "No";
            }

            /********** properties **********/
            self.newUser = ko.observable();
            self.userBeforeEdit = ko.observable();
            self.users = ko.observableArray();
            self.user = ko.observable();
            self.operationStatus = ko.observable();


            /********** methods **********/

            // create new user (HttpPost)
            self.create = function (formElement) {
                self.operationStatus("Creating ...");
                $(formElement).validate();
                if ($(formElement).valid()) {
                    $.post(baseApiUri + "/api/user", $(formElement).serialize(), null, "json")
                    .done(function (o) {
                        self.users.push(o);
                    })
                    .fail(function (xhr, textStatus, err) {
                        self.operationStatus(err);
                    });
                }
            }

            self.cancelAdd = function () {
                self.newUser(new userViewModel());
            }
        }

        // instantiate the above ViewModel and apply Knockout binding
        ko.applyBindings(new viewModel());

        // make jQuery tabs
        $("#tabs").tabs();
    </script>
}

<div id="tabs">
    <ul>
        <li><a href="#detailTab" id="detailTabHandle">User Detail</a></li>
        <li><a href="#addNewTab" id="addNewTabHandle ">New User</a></li>
    </ul>

    <div id="addNewTab">
    <form>
    <div>
        <label for="firstNameNew">First Name</label>
        <input type="text" title="First Name" data-bind="value:newUser.firstName"/>
    </div>

    <div>
        <label for="lastNameNew">Last Name</label>
        <input type="text" title="Last Name" data-bind="value: newUser.lastName"/>
    </div>

    <div>
        <label for="fullNameNew">Full Name</label>
        <input type="text" title="Full Name" data-bind="value: newUser.long_Name"/>
    </div>

    <div>
        <label for="loginNew">Login</label>
        <input type="text" title="Login" data-bind="value: newUser.Login"/>
    </div>

    <div>
        <label for="emailNew">Email</label>
        <input type="text" title="Email" data-bind="value: newUser.email"/>
    </div>

    <div>
        <label for="emailAlertNew">Email Alert</label>
        <span><input data-bind="checked: newUser.alertOptIn" type="radio" title="Send Email Alert" value="Yes" name="alertOptIn"/>Yes</span>
        <span><input data-bind="checked: newUser.alertOptIn" type="radio" title="No Email Alert" value="No" name="alertOptIn"/>No</span>
    </div>

    <div>
        <input type="button" value="Save" data-bind="click: create" />
        <input type="button" value="Cancel" data-bind="click: cancelAdd" />
        <p data-bind="text: operationStatus" class="status"></p>
    </div>
    </form>
    </div>
</div>

Answer 1

you missed parentheses when retrieving a value for user here:

url: baseApiUri + "/api/user/" + self.user().user_ID