MVC Knockout JS внутри диалогового окна JQuery

Я использую knockout js в представлении, чтобы отобразить список полей (то есть имя, фамилию и т.д.). Поля перечислены внутри шаблона нокаута с использованием наблюдаемого массива. Шаблон содержит следующие поля: имя (ввод), перевод (выбор) и функция добавления/удаления. (См. Ниже)

var viewModel = {
    Fields: ko.observableArray([new Field(2, "First Name", 1), new Field(3, "Last Name", 2)]),
    AvailableTranslations: ko.observableArray([new Translation(1, "Prefixes"), new Translation(2, "Suffixes")]),
    remove: function(item) {
        ko.utils.arrayRemoveItem(this.Fields, item)
    },
    add: function() {
        this.Fields.push(new Field(0, "", ""));
    }
};

var Translation = function(id, name) {
    this.ID = id;
    this.Name = name;
};

var Field = function(id, name, translationID){
    this.ID = ko.observable(id);
    this.Name = ko.observable(name);
    this.TranslationID = ko.observable(translationID);
};

Рядом с списком выбора трансляции в шаблоне я бы хотел добавить новый перевод, который не существует. Когда кнопка нажата, я хочу открыть диалоговое окно jQuery UI, содержащее частичное представление, которое использует нокаут. Частичное представление будет содержать имя перевода, а также старое значение и новое значение (оба текстовых поля). Старые и новые значения являются наблюдаемым массивом.

var viewModelPartialDialog = {
    TranslationName: ko.observable(),
    Values: ko.observableArray([]),
};

var Value = function(id, oldVal, newVal) {
    this.ID = id;
    this.OldVal = oldVal;
    this.NewVal = newVal;
};

Когда пользователь отправляет форму частичного просмотра, я хотел бы, чтобы он сделал вызов сохранения, а также обновил наблюдаемый массив AvailableTranslations.

Может ли кто-нибудь помочь мне или указать мне в правильном направлении, чтобы выполнить это?

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

Возвращаясь к исходному примеру, я хотел бы добавить новые поля в viewModelA, подобно тому, как у вас есть список продуктов. Однако вместо редактирования поля в диалоговом окне я хотел бы открыть диалоговое окно для добавления нового перевода. Новый перевод, который открывается в диалоговом окне, будет отдельной моделью просмотра (viewModelB). После добавления имени и значений трансляции диалог будет асинхронно размещаться, а затем обновлять модель наблюдаемого вида (viewModelA) AvailableTranslations.

Можете ли вы привести пример этой функции?

Ответ 1