Đặt giá trị được chọn của phần tử Chọn trong Thanh ghi

Question

Tôi có mẫu sổ tay lái mà tôi đang nhúng vào trang html của mình. Có một phần tử chọn với tất cả các tùy chọn có sẵn đã được hiển thị. Làm cách nào tôi có thể đặt giá trị được chọn của danh sách chọn khi tôi hiển thị mẫu của mình?

<script id="my-template" type="text/x-handlebars-template">  
    <div id="my-modal"> 
     <form action="/TestAction" method="post"> 
     <input id="MyId" name="MyId" type="hidden" value="{{MyId}}" />  
     <label for="Test">Test: (optional)</label> 
     <select id="Test" name="Test"> 
      <option value="">-- Choose Test --</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
     </select> 
     </form> 
    </div> 
</script> 

Answer 1

Dưới đây là một giải pháp (được xây dựng trên EmberJS để giảm bớt phần JS)

tôi refactored mẫu của bạn một chút, để có các đối tượng cho các giá trị đề xuất, có thể bằng cách này mang thuộc tính selected .. .

mẫu phần:

<script type="text/x-handlebars" data-template-name="my-template"> 
    <div id="my-modal"> 
     <form action="/TestAction" method="post"> 
     <input id="MyId" name="MyId" type="hidden" value="{{MyId}}" />  
     <label for="Test">Test: (optional)</label> 
     <select id="Test" name="Test"> 
      <option value="">-- Choose Test --</option> 
      {{#each values}} 
       <option {{bindAttr value="id" selected="selected"}}>{{label}}</option> 
      {{/each}} 
     </select> 
     </form> 
    </div> 
</script> 

phần JS:

App.MyView = Ember.View.extend 
    templateName: 'my-template' 

    MyId: 42 
    values: [{ 
     id: 1, 
     label: '1' 
    }, { 
     id: 2, 
     label: '2' 
    }, { 
     id: 3, 
     label: '3', 
     selected: true 
    }, { 
     id: 4, 
     label: '4' 
    }] 

Bạn có thể thử nó @http://jsfiddle.net/MikeAski/uRUc3/

Answer 2

Tôi đã helper {{#each}} là nguồn cảm hứng, và đã viết một helper tùy chỉnh mà làm điều tương tự: vòng qua một danh sách, và liên tục gắn thêm các nội dung của đối số cho một đầu ra chuỗi. (Từ đây: Handlebars block helpers)

Trong trường hợp này, tôi không chuyển đoạn HTML mẫu để làm tham số options của hàm, giống như khi bạn sử dụng {{#each}}. Thay vào đó, tôi chỉ xây dựng các thẻ <option> bằng lực lượng vũ phu và kiểm tra mọi lần lặp của danh sách context. Cuối cùng, tôi trả lại một chuỗi dài gồm các thẻ <option></option> và hy vọng một trong số chúng có số selected="selected".

Chức năng:

Handlebars.registerHelper('options_selected', function(context, test) { 
    var ret = ''; 
    for (var i = 0, len = context.length; i < len; i++) { 
     var option = '<option value="' + context[i]+'"'; 
     if (test.toLowerCase() == context[i].toLowerCase()) { 
      option += ' selected="selected"'; 
     } 
     option += '>'+ Handlebars.Utils.escapeExpression(context[i]) + '</option>'; 
     ret += option; 
    } 

    return new Handlebars.SafeString(ret); 
}); 

Thẻ được sử dụng:

<script id="form-state" type="text/x-handlebars-template"> 
    <select name="state"> 
    {{{options_selected states selectedState}}} 
    </select> 
</script> 

Xin gợi ý cho bất kỳ sửa đổi đó sẽ cải thiện điều này, cảm ơn!

Answer 3

Tôi gặp vấn đề tương tự.

$('select').val(value); 

Đây là cách tôi giải quyết, tôi đặt giá trị mong muốn bằng jQuery sau khi hiển thị mẫu. Thật đáng ngạc nhiên. (Có lẽ đó cũng là cách để giữ cho các mẫu không logic)

Answer 4

Nếu bạn không muốn xây dựng tùy chọn như một phần của trình trợ giúp, bạn có thể sử dụng kết hợp của trợ giúp tay lái nhỏ và ngữ cảnh chính, được biểu thị bằng các ../ cú pháp:

đầu tiên viết helper:

Handlebars.registerHelper('selected', function(option, value){ 
    if (option === value) { 
     return ' selected'; 
    } else { 
     return '' 
    } 
}); 

và sau đó trong mẫu của bạn, bạn gọi helper của bạn và vượt qua trong bối cảnh cha mẹ bên trong each vòng lặp để kiểm tra selectedState

{{#each states}} 
    <option value="{{this}}" {{selected this ../selectedState}}>{{this}}</option> 
{{/each}} 

Answer 5

Bạn có thể sử dụng các giá trị ngay trong mẫu Handlebars như vậy.

tay lái Template

<select id="distance"> 
     <option value="15" {{#if (isEqual 15 distance)}} selected {{/if}}>15</option> 
     <option value="25" {{#if (isEqual 25 distance)}} selected {{/if}}>25</option> 
     <option value="50" {{#if (isEqual 50 distance)}} selected {{/if}}>50</option> 
     <option value="100" {{#if (isEqual 100 distance)}} selected {{/if}}>100</option> 
     <option value="300" {{#if (isEqual 300 distance)}} selected {{/if}}>300</option> 
</select> 

tay lái Helper

define(['hbs/handlebars'], function (Handlebars) { 
    'use strict'; 

    Handlebars.registerHelper('isEqual', function (expectedValue, value) { 
    return value === expectedValue; 
    }); 
});