Не удается связать нокаут с представлением 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>


twitter-bootstrap asp.net-mvc-4 knockout.js knockout-mapping-plugin
person Sami    schedule 08.01.2014    source источник
comment
Какую ошибку вы получаете?   -  person PW Kad    schedule 08.01.2014
comment
нет ошибки, это не обязательные значения.   -  person Sami    schedule 08.01.2014
comment
Настройте скрипку, тогда это, вероятно, просто синтаксическая ошибка   -  person PW Kad    schedule 08.01.2014

Ответы (2)


arrow_upward
0
arrow_downward

Ваша проблема в том, что вы пытаетесь выполнить двустороннюю привязку данных к ненаблюдаемому свойству, поэтому при его обновлении он не уведомляет пользовательский интерфейс. Сделайте своего пользователя наблюдаемым и установите его как экземпляр объекта или создайте модель, из которой будут получены ваши свойства.

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());
person PW Kad    schedule 08.01.2014
comment
Это должно быть ko.applyBindings(new viewModel());? или я ошибаюсь? - person Sami; 08.01.2014
comment
Правильно, я копировал и вставлял часть приведенного выше кода, позвольте мне обновить - person PW Kad; 08.01.2014
comment
Выдает мне эту ошибку :( Uncaught TypeError: невозможно вызвать метод «push» неопределенного - person Sami; 08.01.2014
comment
Потому что self.Users не определен в моем коде выше. Добавьте его, как вы делали раньше self.Users = ko.observableArray(); Вам нужно прочитать документы - person PW Kad; 08.01.2014
comment
добавлена ​​строка self.Users = ko.observableArray([]); убрал ошибку, но все равно не привязывает :( - person Sami; 08.01.2014

arrow_upward
-1
arrow_downward

Здесь возьмите следующую скрипку:: http://jsfiddle.net/9ZCBw/

где у вас есть модель контейнера, которая владеет коллекцией пользователей и имеет функцию (ajax лишен удобства использования под скрипкой)

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));
    }
}

Здесь у вас есть экземпляры пользователей, которые затем могут быть привязаны к вашей модели... как показано также.

person beauXjames    schedule 08.01.2014
comment
-1 за использование моего кода для создания ответа вместо предложения его редактирования - person PW Kad; 08.01.2014
comment
на самом деле, я собирался сделать свою собственную скрипку и не видел ваш код, пока не опубликовал свой ответ ... забавно, как хорошие умы могут думать одинаково. - person beauXjames; 08.01.2014
comment
кроме того, в вашей модели нет наблюдаемого массива пользователей... вы предлагаете «подтолкнуть» нового пользователя к наблюдаемому массиву, который еще не объявлен. [самопользователи] - person beauXjames; 08.01.2014
comment
Как указано в комментариях, OP отвечает за включение изменений кода в свою существующую базу кода, включая знание того, что ему все еще нужен observableArray для добавления в него нового значения... - person PW Kad; 08.01.2014