Knockout.js无法更新服务器数据库

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.

以下是我使用Knockout.js和MVC WebApi的单页应用程序。从WebApi服务获取数据没有问题。但是，我既不能对服务器执行PUT也不能执行POST。当我单击绑定到self.update（）的Update按钮时，它总是显示“baseApiUri / api / user / undefined”。我认为self.user（new userViewModel（user））行会设置当前用户记录的范围，但似乎并非如此。我想使用userViewModel而不是硬代码来获取和设置用户可观察对象中的每个属性。感谢您的帮助。

@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>

1 个解决方案

#1

you missed parentheses when retrieving a value for user here:

在这里为用户检索值时，您错过了括号：

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