JQuery 对话框中的 MVC Knockout JS [英] MVC Knockout JS inside JQuery dialog

问题描述

我在视图上使用淘汰赛 js 来显示字段列表(即名字、姓氏等).这些字段使用可观察数组在淘汰模板中列出.该模板包含以下字段:名称(输入)、翻译(选择)和添加/删除功能.(见下文)

I am using knockout js on a view to display a list of fields (ie, first name, last name, etc). The fields are listed inside a knockout template using the an observable array. The template contains the following fields: name (input), translation (select), and an add/remove function. (See below)

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 对话框，其中包含一个利用淘汰赛的局部视图.部分视图将包含翻译名称以及旧值和新值(两个文本字段).旧值和新值是一个可观察的数组.

Next to the translation select list in the template, I would like an option to add a new translation that does not exist. When the button is clicked I want to open a jquery UI dialog box containing a partial view that utilizes knockout. The partial view will contain a translation name as well as an old value and a new value (both text fields). The old and new values are an observable array.

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

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

当用户提交局部视图的表单时，我希望它进行保存调用并更新 AvailableTranslations 可观察数组.

When the user submits the partial view's form, I would like it to make a save call as well as update the AvailableTranslations observable array.

谁能帮助我或为我指明正确的方向来完成这项工作?

Can anyone help me out or point me in the right direction to accomplish this?

谢谢你的例子.这很有帮助，但不完全是我想要做的.在您的示例中，我无法将 observableArray 添加到产品，然后在对话框的编辑模板中添加嵌套模板.

Thanks for the example. It is helpful but not exactly what I'm trying to do. In your example, I wasn't able to add an observableArray to the Product and then have a nested template inside the dialog's edit template.

回到我最初的例子，我想在 viewModelA 中添加新字段，类似于您拥有产品列表的方式.但是，我不想在对话框中编辑字段，而是想打开一个对话框来添加新的翻译.在对话框中打开的新翻译将是一个单独的视图模型 (viewModelB).添加翻译名称和值后，对话框将异步发布，然后更新原始视图模型的 (viewModelA) AvailableTranslations 可观察数组.

Going back to my original example, I would like to add new fields in viewModelA, similar to how you have the product list. However, instead of edit the field in the dialog, I'd like to open a dialog to add a new Translation. The new translation that opens in the dialog would be a separate view model (viewModelB). Once the translation name and values are added, the dialog would post asynchronously and then update original view model's (viewModelA) AvailableTranslations observable array.

您能提供一个有关此功能的示例吗?

Can you provide an example of this functionality?

推荐答案

这里是一个可能与您正在做的事情类似的示例:http://jsfiddle.net/rniemeyer/WpnTU/

Here is a sample that might be similar to what you are doing: http://jsfiddle.net/rniemeyer/WpnTU/

它在页面加载时设置对话框，但不打开它.然后，有一个自定义绑定处理程序，只要填充了selectedItem"可观察对象(可能是现有项目或新项目)，就会调用该处理程序.

It sets up the dialog when the page loads, but doesn't open it. Then, there is a custom binding handler that will get called whenever a "selectedItem" observable is populated (which could be with an existing item or a new item).

简单的自定义绑定处理程序如下所示:

The simple custom binding handler looks like:

//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");
        }
    }
}

这篇关于JQuery 对话框中的 MVC Knockout JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！