我在视图上使用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对话框,其中包含使用knockout的局部视图.部分视图将包含翻译名称以及旧值和新值(两个文本字段).旧值和新值是可观察的数组.
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,然后在对话框的编辑模板中有一个嵌套模板.
回到我原来的例子,我想在viewmodelA中添加新字段,类似于产品列表的方式.但是,我不打算在对话框中编辑字段,而是打开一个对话框来添加新的翻译.在对话框中打开的新翻译将是一个单独的视图模型(viewmodelB).添加转换名称和值后,对话框将异步发布,然后更新原始视图模型(viewmodelA)的AvailableTranslations可观察数组.
你能提供这个功能的例子吗？
解决方法
以下示例可能类似于您正在执行的操作：
http://jsfiddle.net/rniemeyer/WpnTU/
它在页面加载时设置对话框,但不打开它.然后,有一个自定义绑定处理程序,只要填充了“selectedItem”observable(可以使用现有项或新项),就会调用它.
简单的自定义绑定处理程序如下所示
//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");
}
}
}
