model-view-controller - JQuery 对话框中的 MVC Knockout JS

Question

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

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

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

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

当用户提交部分 View 的表单时，我希望它进行保存调用以及更新 AvailableTranslations 可观察数组。

任何人都可以帮助我或指出正确的方向来实现这一目标吗？

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

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

你能提供一个这个功能的例子吗？

Answer 1

这是一个可能与您正在执行的操作类似的示例:http://jsfiddle.net/rniemeyer/WpnTU/

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

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

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