knockoutjs: vấn đề với thẻ tùy chọn và khả năng hiển thị

Question

Có vẻ như chúng tôi có hành vi khác nhau giữa hai nhóm trình duyệt về khả năng hiển thị OPTIONS của thẻ SELECT html: nếu tôi đặt hiển thị thành sai trong thẻ OPTION, mục danh sách thả xuống bị ẩn trong Chrome và Firefox nhưng nó vẫn hiển thị trong IE8 và Safari.

http://jsfiddle.net/v8gyG/12/

Bạn có bất cứ đề nghị hoặc tôi đang làm điều gì sai? Xin lưu ý rằng tôi không thể sử dụng jquery.tmpl.js trong trường hợp này, chỉ cứng mã hoá CHỌN Thẻ/OPTION

Answer 1

Tôi biết đó là đã hỏi từ lâu rồi, nhưng nó đáng để trả lời vì tôi đã tìm thấy câu hỏi này trên Google trong khi tự tìm kiếm câu trả lời. Tôi đã tìm ra giải pháp để tôi quay lại đây để chia sẻ nó. Hai năm và "có thể nhìn thấy" vẫn không hoạt động **, vì vậy tôi đã kiểm tra "if" binding. Dữ liệu ràng buộc nó bên trong phần tử tùy chọn làm cho nó ẩn nhưng có thể lựa chọn. Knockout cũng có một cái gì đó gọi là: "cú pháp dòng chảy kiểm soát containerless".

này làm việc cho tôi:

<!-- ko if: category.parent == 0 --> 
    <option data-bind="value: category.name, text: category.name"></option> 
    <!-- /ko --> 

Nó hoạt động vì nếu ẩn DOM. Từ trang web loại trực tiếp:

nếu đóng vai trò tương tự với ràng buộc hiển thị. Sự khác biệt là rằng, với dấu hiệu có thể nhìn thấy, luôn luôn nằm trong DOM và luôn có các thuộc tính ràng buộc dữ liệu được áp dụng - ràng buộc hiển thị chỉ sử dụng CSS để chuyển đổi chế độ hiển thị của phần tử vùng chứa. Tuy nhiên, nếu ràng buộc, , hãy thêm hoặc xóa đánh dấu chứa trong DOM của bạn, và chỉ áp dụng các ràng buộc cho con cháu nếu biểu thức là đúng.

Bạn có thể đọc thêm trong tài liệu: http://knockoutjs.com/documentation/if-binding.html

Kiểm tra tùy chọn khác nhau ở đây: http://jsfiddle.net/v8gyG/24/

** "nhìn thấy" hoạt động trong Chrome 27 và Firefox 21 nhưng không phải với multiselect trong Chrome.

<!-- ko if: --> cũng hoạt động trong IE 10 và có nhiều lựa chọn trong Chrome.

Answer 2

Khi bạn thiết lập các thuộc tính visible, loại trực tiếp chỉ cần thêm một thuộc tính style="display: none" tới phần tử <option>. Điều này không hợp lệ trong IE. Xem:

style.display='none' doesn't work on option tags in chrome, but it does in firefox

Answer 3

Mã cho biết bạn đang sử dụng lựa chọn để chọn số trang. Xem xét việc tạo một DependentObservable có chứa các tùy chọn.

viewModel.Pages = ko.dependentObservable(function() { 
    var pages = [] 
    for (var i=0 ; i < this.NumPages() ; ++i) { 
    pages.push({label: "Pag " + (i+1), value: (i+1)}) 
    } 
    return pages; 
}, viewModel) 

Và trong giao diện:

<select data-bind="value: Page, options: Pages, optionsText: 'label'></select> 

Khi trang 2 được chọn, biến Page sẽ chứa {label: 'Pag 2', giá trị: 2}