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

Бывал в нокаут и медленно привыкал к нему. Пытаясь использовать его в новом проекте, но мне трудно найти работу, которая будет работать. Хотя я понимаю и могу делать простые примеры (простая форма с текстовыми полями, привязанными к 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
добавлено
Просмотры: 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, источник