Knockout.js, отображающий объект JSON в объект Javascript - PullRequest
Новая
       7

Knockout.js, отображающий объект JSON в объект Javascript

9 голосов
/ 10 января 2012

У меня проблема с отображением объекта Json, полученного с сервера, в предопределенный объект Javascript, который содержит все необходимые функции, которые используются в привязках

Код Javascript следующий 

function Person(FirstName, LastName, Friends) {
    var self = this;
    self.FirstName = ko.observable(FirstName);
    self.LastName = ko.observable(LastName);
    self.FullName = ko.computed(function () {
        return self.FirstName() + ' ' + self.LastName();
    })
    self.Friends = ko.observableArray(Friends);
    self.AddFriend = function () {
        self.Friends.push(new Person('new', 'friend'));
    };
    self.DeleteFriend = function (friend) {
        self.Friends.remove(friend);
    };      
}

var viewModel = new Person();

$(document).ready(function () {
    $.ajax({
        url: 'Home/GetPerson',
        dataType: 'json',
        type: 'GET',
        success: function (jsonResult) {
            viewModel = ko.mapping.fromJS(jsonResult);
            ko.applyBindings(viewModel);
        }
    });
});

HTML: 

<p>First name: <input data-bind="value: FirstName" /></p>
<p>Last name: <input data-bind="value: LastName" /></p>
<p>Full name: <span data-bind="text: FullName" /></p>
<p>#Friends: <span data-bind="text: Friends().length" /></p>
@*Allow maximum of 5 friends*@
<p><button data-bind="click: AddFriend, text:'add new friend', enable:Friends().length < 5" /></p>
<br>
@*define how friends should be rendered*@
<table data-bind="foreach: Friends">
    <tr>
        <td>First name: <input data-bind="value: FirstName" /></td>
        <td>Last name: <input data-bind="value: LastName" /></td>
        <td>Full name: <span data-bind="text: FullName" /></td> 
        <td><button data-bind="click: function(){ $parent.DeleteFriend($data) }, text:'delete'"/></td> 
    </tr>
</table>

Мой код ServerSide MVC для получения исходных данных выглядит следующим образом: 

    public ActionResult GetPerson()
    {
         Person person = new Person{FirstName = "My", LastName="Name",
                        Friends = new List<Person>
                        {
                             new Person{FirstName = "Friend", LastName="Number1"},
                             new Person{FirstName = "Friend", LastName="Number2"}
                        }
        };
        return Json(person, JsonRequestBehavior.AllowGet);
    }

Я пытаюсь использовать подключаемый модуль сопоставления для загрузки Json в мой объект Javascript, чтобы все было доступно для привязок (функция add и вычисленные свойства объектов Friend).

Когда я использую плагин сопоставления, он, похоже, не работает. При использовании плагина метод AddFriend недоступен во время привязки. Можно ли заполнить объект JavaScript Person с помощью подключаемого модуля отображения или все должно быть сделано вручную?

1 Ответ

11 голосов
/ 10 января 2012

Вы можете посмотреть передачу параметров отображения в подключаемый модуль отображения, в частности, create обратный вызов, как описано здесь .

Что-то вроде: 

var mapping = {
    create: function(options) {
        var person = options.data,
            friends = ko.utils.arrayMap(person.Friends, function(friend) {
               return new Person(friend.FirstName, friend.LastName);   
            });

        return new Person(person.FirstName, person.LastName, friends);
    }
};

Пример: http://jsfiddle.net/rniemeyer/5EWDG/

Однако в этом случае вы не получаете много энергии от подключаемого модуля отображения, и вы можете просто сделать это без вызова собственного конструктора Person и сопоставления массива Friends с объектами Personв конструкторе, например: http://jsfiddle.net/rniemeyer/mewZD/

Еще одно примечание из вашего HTML: убедитесь, что для элементов, содержащих контент, вы указали начальный и конечный теги (span и button были не такимив вашем коде).У KO будут проблемы, если вы не укажете их правильно.

...