Asp.net mvc 4 无法将knockoutjs与mvc视图绑定

我是knockoutjs新手，我正在尝试绑定视图，但无法绑定。从服务器获取的数据很好，ajax工作正常，但并没有绑定问题

以下是我的js代码：

var UserViewModel = function () {
var self = this;
//Declare observable which will be bind with UI 
self.Id = ko.observable("0");
self.FirstName = ko.observable("");
self.LastName = ko.observable("");

//The Object which stored data entered in the observables
var UserData = {
    Id: self.Id || 0,
    FirstName: self.FirstName || '',
    LastName: self.LastName || ''
   };

//Declare an ObservableArray for Storing the JSON Response
self.Users = ko.observableArray([]);

GetUser(12); //This is server side method.

function GetUser(userId) {
    //Ajax Call Get All Employee Records
    $.ajax({
        type: "GET",
        url: "/api/Users/" + userId,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            //alert("success");
            UserData = response.data.UserData;
            alert(UserData.FirstName); //This is showing me correct name.
            self.Users(response.data.UserData); //Put the response in ObservableArray
        },
        error: function (error) {
            alert(error.status);
        }
    });
    //Ends Here
}
}

ko.applyBindings(new UserViewModel());

以下是我的看法：

  <form class="form-horizontal" data-bind="with: UserData">
                           <div class="row">
                               <div class="control-group">
                                   <label class="control-label">First Name</label>
                                   <label class="control-label" data-bind="text: FirstName"></label>
                               </div>
                            </div>

                            <div class="row">
                              <div class="control-group">
                                   <label class="control-label">Last Name</label>
                                   <input type="text" placeholder="Last Name" data-bind="value: LastName">
                               </div>
                            </div>

名字
姓

---

您的问题是，您正试图针对不可观察的属性进行双向数据绑定，因此当您更新它时，它不会通知UI。将您的用户设置为可观察对象，并将其设置为对象的实例，或者创建一个模型以从中派生属性

function userModel(user) {
    var self = this;
    self.Id = ko.observable(user.Id);
    self.FirstName = ko.observable(user.FirstName);
    self.LastName = ko.observable(user.LastName);
}


var viewModel = function () {
    var self = this;    
    //The Object which stored data entered in the observables
    var UserData = ko.observable();
    GetUser(12);
    function GetUser(userId) {
        //Ajax Call Get All Employee Records
        $.ajax({
            type: "GET",
            url: "/api/Users/" + userId,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                //alert("success");
                UserData(new userModel(response.data.UserData));
                alert(UserData().FirstName()); //This is showing me correct name.
                self.Users.push(UserData()); //Put the response in ObservableArray
            },
            error: function (error) {
                alert(error.status);
            }
        });
    }
}
ko.applyBindings(new viewModel());

---

在这里，从下面的小提琴中提取：

其中，您有一个容器模型，它拥有用户集合并具有功能（ajax在fiddle下剥离以实现可用性）

---

在这里，您可以将用户实例绑定到您的模型…如图所示。

您收到的错误是什么？没有错误，它不是绑定值。设置一个fiddle，那么它可能只是语法错误。它应该是ko.applyBindings（new viewModel（））；？或者我错了？这是正确的，我复制并粘贴了上面的一些代码，让我更新我这个错误：（“未捕获的TypeError:无法调用未定义的方法‘push’”，因为我上面的代码中没有定义self.Users。像之前一样添加self.Users=ko.observearray（）；您需要阅读docsadded行self.Users=ko.observearray（[]）；已删除错误，但仍不具有约束力：（-1因为使用我的代码来创建答案，而不是为它提供建议的编辑，实际上，我是在做我自己的小提琴，直到我发布了我的答案之后才看到你的代码…有趣的是，好的头脑可以想得一样。此外，你的模型没有可观察的用户阵列…你是在建议将新用户“推”给观察者尚未声明的le数组。[self.Users]如评论中所述，OP负责将代码更改合并到其现有代码库中，包括知道他仍然需要observableArray将新值推送到其中。。。

function ViewModel () {
    var self = this;
    self.Users = ko.observableArray();

    self.GetUser = function (userId) {
        var UserData = {
            Id: userId,
            FirstName: 'Bob',
            LastName: 'Ross'
        };
        self.Users.push(new UserModel(UserData));
    }
}