0

以下は、Knockout.js と MVC WebApi を使用したシングル ページ アプリです。WebApi サービスからのデータの取得に問題はありません。ただし、サーバーに対して PUT も POST も実行できません。self.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>

4

1 に答える 1

1

ここでユーザーの値を取得するときに括弧がありませんでした:

url: baseApiUri + "/api/user/" + self.user().user_ID
于 2013-09-05T01:55:52.763 に答える