Смутно о сложной структуре классов и нокауте

Бывал в нокаут и медленно привыкал к нему. Пытаясь использовать его в новом проекте, но мне трудно найти работу, которая будет работать. Хотя я понимаю и могу делать простые примеры (простая форма с текстовыми полями, привязанными к ko.observables или таблицей или списком, привязанным к ko.observableArray), я не могу получить синтаксис для комбинации, особенно если я хочу преобразуйте данные в формат JSON, чтобы передать его через веб-службу для сохранения в базу данных.

В основном это форма ввода данных с некоторыми текстовыми полями, затем список элементов (подумайте об информации компании + список ее сотрудников).

I have a sample Fiddle here: http://jsfiddle.net/rhzu6/

В функции saveData я просто не знаю, что делать, чтобы собрать данные. Выполнение ko.toJS (self) просто показывает «Объект».

Я пытался определить данные как объекты, но быстро потерялся:

function Company(CompanyName, ZipCode) {

    var self = this;
    self.ZipCode = ko.observable(ZipCode);
    self.CompanyName = ko.observable(CompanyName );
    self.Employees = ko.observableArray();
}

function Employee(FirstName, LastNameB) {
    var self = this;
    self.FirstName = ko.observable(FirstName);
    self.LastName = ko.observable(LastName);
}

Тогда ViewModel выглядела так:

function viewModel() {
    var self = this;
    self.Company = ko.observable();//company?
    self.Employees = ko.observableArray();//?
}

Но столкнулся с тем же вопросом. А также были проблемы с привязкой - привязка данных: «значение: CompanyName» бросило исключение, сказав, что не знает, что такое CompanyName ...

Покрасьте меня в тупик. Я уверен, что это что-то простое, что я просто не хватает.

Любая помощь будет оценена по достоинству!

благодаря

2
nl ja de
Вы должны опубликовать свою разметку html
добавлено автор Feisty Mango, источник
Он находится в ссылке jsfiddle.
добавлено автор John T, источник

2 ответы

Вы ищете ko.toJSON , который сначала вызовет ko.toJS на ViewModel, а затем JSON.stringify .

ko.toJS will convert your knockout model to a simple JavaScript object, hence replacing all observables etc. with their respective values.

Я обновил скрипт , чтобы продемонстрировать.

Для получения дополнительной информации ознакомьтесь с этим Блог Райана Нимейса.

Альтернативой является использование ko.utils.postJson :

ko.utils.postJson(location.href, {model: ko.toJS(viewModel) });

Обратите внимание на ko.toJS снова.

0
добавлено
Это зависит от того, где вы объявляете свой метод сохранения. В случае, если метод сохранения определен в viewModel, вы можете просто передать себя или это методу toJSON.
добавлено автор thomaux, источник
Я связал обновленную версию вашей скрипки в своем ответе. Ваш метод добавления ничего не делает, он просто нажимает «undefined» на ваш массив
добавлено автор thomaux, источник
Это не так много, что функция JSON для вызова, это то, что нужно передать ей. В функции self.saveData viewModel возвращается: «ReferenceError: viewModel не определен»
добавлено автор John T, источник
Ну, я не знаю, что я делал раньше, но я изменил свой фактический код, чтобы больше соответствовать jsFiddle ... и выполняя ko.toJSON (self) в функции self.saveData (которая объявлена ​​в viewModel) правильная вещь. Как я уже сказал, возможно, что-то нелепо. Тем не менее, попытка добавить нового сотрудника не добавляет новую строку в таблицу ... Спасибо, хотя!
добавлено автор John T, источник
Я также обновляю скрипту: jsfiddle.net/johnt519/rhzu6/3 с моей собственной немой ошибка - нужно делать self.Employees.push (новый Employee ()); нажатие на Employees без() (я также добавил класс Employee, чтобы KO знал, что делать). Спасибо за вашу помощь!
добавлено автор John T, источник

Мне кажется, что вы (семантически) хотите представить форму. Поэтому я думаю, что вы должны использовать отправить привязку . Самое большое преимущество в том, что вы слушаете событие отправки, которое позволяет отправлять другим способом, например Ctrl + Enter или любую другую комбинацию клавиш, которую вы хотите.

Ниже приведен пример того, как может выглядеть обработчик submitEvent. Обратите внимание, что он использует ko.mapper , что является отличным способом создания viewModel из любого JS/JSON-объект, который вы хотите. Как правило, у вас будет

[backend model] -> serialization -> [JS/JSON-ojbect] -> ko.mapper.fromJSON(obj) -> knockout wired viewModel.

viewModel.submitEvent = function() {
    if (viewModel.isValid()) { //if you are using knockout validate
        $.ajax(
            {
                url: '/MyBackend/Add',
                contentType: 'application/json',    
                type: 'POST',
                data: ko.mapping.toJSON(viewModel.entityToValidateOnBackend),
                success: function (result) {
                    ko.mapping.fromJSON(result, viewModel);
                }
            }
        );
    }
};

Удачи!

0
добавлено
Мне нужно будет изучить это. Другая морщина, которую я не добавлял, чтобы не усложнять ее больше, заключается в том, что все это связано с настраиваемым модулем DotNetNuke, который содержится внутри страницы на узле DNN, поэтому захват отправки может (или не может) быть проблемой (замечательный .NET, играй хорошо или иначе;)) Спасибо.
добавлено автор John T, источник
Ну, используя этот метод, потребуется добавить привязку к элементу FORM (<form data-bind = "submit: doSomething">) - но являясь сайтом .NET/DNN, у меня нет доступа к элементу FORM, DNN добавляет его на страницу. Еще раз спасибо.
добавлено автор John T, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском