Tôi đang gặp vấn đề với danh sách chọn loại trực tiếp, Vấn đề của tôi là tôi đang có danh sách các mục có chứa mô tả, khóa và có thể chỉnh sửa. bằng cách sử dụng danh sách các mục tôi đang điền vào hộp chọn.Sự kiện thay đổi cháy nổ khi danh sách lựa chọn khởi tạo
var RequiredItemLine = function() {
var self = this;
self.desc = ko.observable();
self.key = ko.observable();
self.editable = ko.observable(false);
self.requireditemsdata = ko.observableArray([
{ desc: "Boarding of exposed wall openings in the vicinity of ...", key: "233", editable: true },
{ desc: "Call in manufacturers to initiate repairs on ...", key: "242", editable: true },
{ desc: "Call in specialist restorers/recoverers for ...", key: "244", editable: true },
{ desc: "Dispatch items for repair (schedule enclosed)", key: "243", editable: false },
{ desc: "Drying and cleaning of contents comprising ...", key: "240", editable: true },
{ desc: "Drying and protective oiling of water affected equipment", key: "241", editable: false },
{ desc: "Drying out of the affected areas of the premises", key: "235", editable: false },
{ desc: "Removal and repackaging of stock comprising ...", key: "239", editable: true },
{ desc: "Removal of agreed vulnerable contents to a place of safety (schedule enclosed) ", key: "236", editable: false },
{ desc: "Segregation of affected and unaffected stock comprising ...", key: "238", editable: true },
{ desc: "Temporary covering of roof to reinstate water tight integrity ", key: "234", editable: false },
{ desc: "Temporary guarding of affected area", key: "237", editable: false },
{ desc: "Temporary shoring of affected structure", key: "232", editable: false }]);
self.selectedItem = ko.observableArray([]);
self.selectedItem.subscribe(function (newValue) {
if (newValue) {
self.editable(newValue.editable);
//alert(newValue.editable);
}
});
}
bất cứ khi nào người dùng chọn một tùy chọn từ danh sách lựa chọn, nó chứa thuộc tính có thể chỉnh sửa, sau đó danh sách lựa chọn có để ẩn từ DOM và hộp văn bản phải được hiển thị cho DOM và giá trị đã đến giao từ desc đã chọn từ danh sách chọn.
var RequiredItems = function() {
var self = this;
self.requiredItemSelection = ko.observableArray([]);
self.addRequiredItem = function() {
self.requiredItemSelection.push(new RequiredItemLine());
};
self.removeRequiredItem = function (line) {
self.requiredItemSelection.remove(line);
};
}
var vm = new RequiredItems();
ko.applyBindings(vm);
sự cố là bất cứ khi nào lựa chọn đang tải đến sự kiện thay đổi DOM đang kích hoạt và hiển thị danh sách lựa chọn hoặc trường nhập.
<div class='liveExample' >
<button data-bind='click: addRequiredItem'>Add Required Item</button>
<hr />
<table width='100%'>
<tbody data-bind='foreach: requiredItemSelection' >
<tr>
<td >
<select data-bind='options: requireditemsdata, optionsText: "desc", value: selectedItem'> </select>
</td>
<td>
<a href='#' data-bind='click: $parent.removeRequiredItem'> <img src="../images/Close.gif" /></a>
</td>
</tr>
<tr data-bind="visible : selectedItem().editable">
<td>
<div class="editablecontent" data-bind='html : selectedItem().desc.replace(/\.\.\./g, "<span style='background-color:#ff77ee;margin-left:-2px;letter-spacing:0.05em' contenteditable >...</span>")'></div>
</td>
</tr>
</tbody>
</table>
<ul data-bind='foreach: requiredItemSelection'>
<li data-bind="text : selectedItem().desc "></li>
</ul>
</div>
thấy fiddle http://jsfiddle.net/aroor/VFv4H/3/ Lưu ý: Tôi không muốn sử dụng optionsCaption ràng buộc. có cách nào để giải quyết vấn đề này không? Hay tôi không khai báo cấu trúc dữ liệu đúng cách?
Bạn có thể mô tả các vấn đề mà bạn đang gặp một chút nữa? Có phải bạn đang thấy lựa chọn/đầu vào trong khi trang đang tải không? Một mẹo là thêm 'data-bind =" visible: true "style =" display: none "' vào một phần tử container và nó sẽ được hiển thị khi trang bị ràng buộc như: http://jsfiddle.net/rniemeyer/VFv4H/4/ –
Xin lỗi tiếng Anh không phải là ngôn ngữ đầu tiên của tôi. Vấn đề là bất cứ khi nào người dùng chọn danh sách lựa chọn, theo mục đã chọn, nó có chứa thuộc tính có thể chỉnh sửa, nếu có thể chỉnh sửa thì hiển thị nội dung có thể chỉnh sửa div với desc đã chọn và ẩn danh sách lựa chọn. – Aroor
@RPNiemeyer Bây giờ tôi đã chỉnh sửa câu hỏi, những gì có trong fiddle.mục đích chính là tôi đang tạo một div có thể chỉnh nội dung tự động phụ thuộc vào lựa chọn từ danh sách lựa chọn. – Aroor