NACKOUT MVC NACKOUT JS в диапазоне jQuery

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

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;
};

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

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

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

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

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