Loại bỏ JS của MVC bên trong hộp thoại JQuery

Question

Tôi đang sử dụng jpg loại trực tiếp để hiển thị danh sách các trường (ví dụ: tên, họ, v.v.). Các trường được liệt kê bên trong một mẫu loại bỏ bằng cách sử dụng một mảng quan sát được. Mẫu chứa các trường sau: tên (đầu vào), bản dịch (chọn) và chức năng thêm/xóa. (Xem bên dưới)

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

Bên cạnh danh sách chọn bản dịch trong mẫu, tôi muốn có tùy chọn thêm bản dịch mới không tồn tại. Khi nút được nhấp vào Tôi muốn mở một hộp thoại giao diện người dùng jquery có chứa một phần xem sử dụng loại trực tiếp. Chế độ xem một phần sẽ chứa tên bản dịch cũng như giá trị cũ và giá trị mới (cả hai trường văn bản). Giá trị cũ và mới là một mảng quan sát được.

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

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

Khi người dùng gửi biểu mẫu xem một phần, tôi muốn thực hiện lưu cuộc gọi cũng như cập nhật mảng có thể quan sát của AvailableTranslations.

Có ai có thể giúp tôi hoặc chỉ cho tôi đúng hướng để thực hiện việc này không?

---

Cảm ơn ví dụ. Nó là hữu ích nhưng không chính xác những gì tôi đang cố gắng để làm. Trong ví dụ của bạn, tôi không thể thêm một ObservableArray vào Sản phẩm và sau đó có một mẫu lồng nhau bên trong mẫu chỉnh sửa của hộp thoại.

Quay lại ví dụ ban đầu của tôi, tôi muốn thêm các trường mới trong chế độ xemModelA, tương tự như cách bạn có danh sách sản phẩm. Tuy nhiên, thay vì chỉnh sửa trường trong hộp thoại, tôi muốn mở hộp thoại để thêm Bản dịch mới. Bản dịch mới mở trong hộp thoại sẽ là một mô hình xem riêng biệt (viewModelB). Khi tên bản dịch và giá trị được thêm vào, hộp thoại sẽ đăng một cách không đồng bộ và sau đó cập nhật mảng quan sát có sẵn của khung nhìn có sẵn (viewModelA) của mô hình khung nhìn ban đầu.

Bạn có thể cung cấp ví dụ về chức năng này không?

Answer 1

Đây là một mẫu mà có thể tương tự như những gì bạn đang làm: http://jsfiddle.net/rniemeyer/WpnTU/

Nó thiết lập hộp thoại khi tải trang, nhưng không mở nó. Sau đó, có một trình xử lý ràng buộc tùy chỉnh sẽ được gọi bất cứ khi nào một "selectedItem" có thể quan sát được được điền (có thể là với một mục hiện có hoặc một mục mới).

Việc xử lý tùy chỉnh ràng buộc đơn giản trông giống như:

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