MVC Knockout JS внутри диалога JQuery - PullRequest
Новая
       16

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

5 голосов
/ 15 сентября 2011

Я использую 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.

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

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

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

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

1 Ответ

11 голосов
/ 16 сентября 2011

Вот пример, который может быть похож на то, что вы делаете: http://jsfiddle.net/rniemeyer/WpnTU/

Устанавливает диалог при загрузке страницы, но не открывает его. Затем существует специальный обработчик привязки, который будет вызываться при заполнении наблюдаемой «selectedItem» (которая может быть с существующим или новым элементом).

Простой пользовательский обработчик привязки выглядит так: 

//custom binding handler that opens the jQuery dialog, if the selectedProduct is populated
ko.bindingHandlers.openDialog = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            $(element).dialog("open");
        }
    }
}
...