ASP.NET MVC: Просмотр и отладка JSON объектов при использвании Knockout

Сайтостроение | создано: 13.01.2013 | опубликовано: 13.01.2013 | обновлено: 13.01.2024 | просмотров: 6118

Уже давно искал способ посмотреть модель, которая "приходит" на форму при использовании knockout при связывании ko.applyBinding(). Методом "тыка" получил удовлетворительный результат.

Снова Knockout

Самое тяжелое непривычное при работе с knockout, так это, на мой взгляд, отладка и просмотр данных (ViewModel), который привязывается к форме (представление) через ko.applyBinding(site.mv.myViewModel). Пришлось перебрать огромное количество способов. То одно невозможно узнать, то другое нельзя увидеть. Но вот, недавно, на новогодних выходных, получилось увидеть то что хотелось, причем в "максимальной комплектации". :)

Пример модели

Допустим, у меня есть модель на javascript, вот такой незамысловатой сложности:

(function (site) {
    site.vm.Person = function () {
        var self = this;
        self.Id = ko.observable();
        self.Name = ko.observable();
        self.Description = ko.observable();
        self.Gender = ko.observable();
        self.IsMember = ko.observable();
        self.Age = ko.observable();
        self.Weight = ko.observable();
        self.Country = ko.observable();
        self.MemberDate = ko.observable();
        self.DepartmentId = ko.observable();
        self.Info = ko.computed(function () {
            if (self.Name() & self.Age() & self.Description())
                return self.Name() + " " + self.Age() + " " + self.Description();
            else {
                return "Нет данных";
            }
        });
    };

    site.vm.Order = function() {
        var self = this;
        self.Number = ko.observable().extend({required: true, number:true});
        self.Person = ko.observable(new site.vm.Person()).extend({required:true});
    };
})(site);

Вид формы:

 

Код для просмотра модели

Где угодно на форме (представление) вставляем такой код, который можно обернуть в knockout:

ko.utils.debugInfo = function (items) {
   return ko.computed(function () {
       // новое, а в Knockout 2.1. следует использовать конструкцию
       // JSON.stringify(ko.toJS(viewmodel), null, 2)
       return ko.toJSON(viewmodel, null, 2);
   });
};

И теперь на форме (если код выполнился правильно и без ошибок) можно увидеть разверную информацию по ViewModel:

Всё как на лодони, а благодаря "notifyPropertyChanged" в исполнении knockout, информация еще и "живая".

Удачи уважаемые. Да прибудет с вами сила.