Đặt mục đã chọn trong danh sách chọn dựa trên giá trị mẫu

Question

Làm cách nào để bạn có thể điền trước một điều khiển chọn với giá trị hiện tại từ mẫu?

Tôi có một biểu mẫu đơn giản để chỉnh sửa bản ghi trong đó các giá trị cho bản ghi đã chọn được điền trước khi biểu mẫu được hiển thị. Một chút như thế này:

<input type="text" id="project_name_edit" value="{{selected_name}}"> 

Nhưng mà tôi đang sử dụng một lựa chọn kiểm soát tôi cần để có thể interogate mẫu giá trị và có điều kiện thiết lập selected='selected' tài sản cho các tùy chọn chính xác.

<select id="project_status_edit" value="{{selected_status}}"> 
     <option>GOOD</option> 
     <option>BAD</option> 
     <option>UGLY</option> 
</select> 

handlesbars.js cung cấp trình trợ giúp #IF nhưng điều này chỉ mang lại sự thật hoặc sai.

Tôi có thể có thể hack điều này theo nhiều cách khác nhau nhưng điều này có vẻ giống như một kịch bản mà sẽ có một giải pháp tiêu chuẩn.

Answer 1

Bạn có thể sử dụng một helper:

Handlebars.registerHelper('selected', function(foo, bar) { 
    return foo == bar ? ' selected' : ''; 
}); 

Mà sau đó bạn có thể gọi với:

<select id="project_status_edit"> 
    <option{{selected foo "GOOD"}}>GOOD</option> 
    <option{{selected foo "BAD"}}>BAD</option> 
    <option{{selected foo "UGLY"}}>UGLY</option> 
</select> 

Sử dụng:

{"foo":"UGLY"} 

Hãy thử nó ở đây:

http://tryhandlebarsjs.com/

Mặc dù nó dường như không cho phép tôi lưu nó. :(

Answer 2

Tôi đã gần như là một vấn đề giống nhau, nhưng giá trị tôi đã vượt qua là số và tôi tin rằng tôi có một giải pháp sạch hơn cho trường hợp cụ thể đó là không phụ thuộc vào ma thuật Handlebars.

Trong mẫu:

<select name="button-style" id="button-style" _val="{{button_style}}"> 
    <option value="1">Primary Style</option> 
    <option value="2">Secondary Style</option> 
</select> 

về cơ bản bạn vượt qua số lượng các thuộc tính bạn muốn chọn với _val. Điều này chỉ hữu ích trong trường hợp mỗi tùy chọn có giá trị bằng số liên tiếp. Cũng lưu ý, nếu bạn đặt tên thuộc tính này là 'value', nó sẽ bị ghi đè/bỏ qua theo mặc định, tùy chọn này sẽ chọn tùy chọn đầu tiên.

Bây giờ trong callback .rendered trong tập tin JS của bạn:

Template.templateName.rendered =() -> 
    var btn_style = $('#button-style').attr('_val') 
    $('#button-style option:nth-child(' + btn_style + ')').attr('selected', 'selected') 

này chỉ đơn giản là chọn tùy chọn 'thứ n' trong lĩnh vực chọn này tương ứng với giá trị chúng ta muốn.

Answer 3

Câu trả lời đã chọn không hoạt động nữa. Đó là một câu hỏi cũ nhưng tôi đã có một thời gian khó khăn để tìm ra điều đơn giản này. Đây là giải pháp của tôi:

Handlebars.registerHelper('selected', function(key, value){ 
     return key == value? {selected:'selected'}: ''; 
}); 

Trong phiên bản hiện tại của sao băng, chúng ta không thể thiết lập các thuộc tính HTML không có giá trị, và sao băng không cho phép sử dụng {{}} # nếu một trong hai. Nhưng các đối tượng được truyền cho người trợ giúp được chuyển đổi thành các cặp khóa = giá trị và được tiêm.

CẬP NHẬT

Sử dụng UI.registerHelper thay vì Handlebars.registerHelper in new (> 0.8) phiên bản của thiên thạch từ tay lái namespace được khấu hao (https://github.com/meteor/meteor/wiki/Using-Blaze#handlebars-namespace-deprecated).

Answer 4

Tôi đã thực hiện chức năng này. Thích ứng với trường hợp của bạn

selectedOption=function(){ 
     selectedOpt=document.getElementById("yourTagId_Select"); 
     var att = document.createAttribute("selected"); 
     att.value = "selected"; 
     idObj=Session.get("idObj"); 
     var lib = yourCollection.find({'column._id':idObj}).fetch();  
     for (var i = 0; i < selectedOpt.length; i++) { 
      if (selectedOpt[i].value==lib._id._str){    
       return selectedOpt[i].setAttributeNode(att); 
      } 
     }; 


    } 

Sau khi gọi chức năng của bạn

selectedOption();

Answer 5

tôi đã sử dụng sau đây trong dự án của tôi (trong trường hợp ai đó cần nó :)

<select class="form-control" id="maritalStatusList" > 
     <option {{selectedMaritalStatus "Single"}}> Single</option> 
     <option {{selectedMaritalStatus "Married"}}> Married</option> 
    </select> 

và

Template.editApplicant.helpers({ 
    selectedMaritalStatus: function(key){ 
     return key == this.maritalStatus ? 'selected' : ''; 
    } 
}); 

"this.maritalStatus" nhận được Tình trạng hôn nhân từ tài liệu hiện tại (đơn) .

Sử dụng đoạn mã sau, để lưu các giá trị trong cơ sở dữ liệu

maritalStatus: $('#maritalStatusList').val() 

Cám ơn tất cả các bạn ..