Параметры jQuery.tmpl и <select> - PullRequest
Новая
       3

Параметры jQuery.tmpl и <select>

2 голосов
/ 20 апреля 2011

Я использую плагин jQuery Template (jquery.tmpl.js) и по большей части понимаю, но я действительно изо всех сил пытаюсь заставить его работать с элементами, где параметры для элемента select происходят из одного Объект JSON, но выбранное значение происходит из свойства другого. Ниже мой код:

HTML: 

        <fieldset id="userFieldset">
            <script id="userTemplate" type="text/x-jquery-tmpl">

                    <label for="TitleId">Title</label>
                    <select value="${TitleId}" id="TitleId" name="TitleId">
                        {{tmpl(titles) "#titleTemplate"}}                            
                    </select>  
                    <label for="UserName">Name</label>
                    <input type="text" name="UserName" id="UserName" class="text ui-widget-content ui-corner-all" value="${UserName}"/>
                    <label for="Password">Password</label>
                    <input type="password" name="Password" id="Password" class="text ui-widget-content ui-corner-all" value="${Password}"/>             
            </script>    

            <script id="titleTemplate" type="text/x-jquery-tmpl">
                <option value="${ID}">${Value}</option>
            </script>        
        </fieldset>

JavaScript: 

var titles = Sys.Serialization.JavaScriptSerializer.deserialize("[{\"ID\":3,\"Value\":\"Mr\"}, {\"ID\":2,\"Value\":\"Ms\"}, {\"ID\":1,\"Value\":\"Doctor\"}]", false);

function showEditUser(user) {
    $("#userFieldset").empty();        
    $("#userTemplate").tmpl(user).appendTo("#userFieldset");    
    $("#userDialog").dialog("open");    
}

Однако, это не меняет выбранное значение выбора TitleId. Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

4 голосов
/ 20 апреля 2011

Вам необходимо установить выбранный атрибут для вашего элемента option.

Один из способов сделать это - передать параметры в {{tmpl}}, который содержит ваш TitleId, чтобы вы могли сравнить его с переменной ID объекта заголовка.

Это будет выглядеть примерно так: 

<fieldset id="userFieldset">
    <script id="userTemplate" type="text/x-jquery-tmpl">
        <select id="TitleId" name="TitleId">
            {{tmpl(titles, { selectedId: TitleId }) "#titleTemplate"}}                            
        </select>          
    </script>    

    <script id="titleTemplate" type="text/x-jquery-tmpl">
        <option {{if ID === $item.selectedId}}selected="selected"{{/if}} value="${ID}">${Value}</option>
    </script>        
</fieldset>

Итак, вы передаете TitleId вашему дочернему шаблону и называете его selectedId (вы, конечно, можете просто назвать его TitleId). Вы получаете доступ к нему в дочернем шаблоне от объекта $item, например $item.selectedId, и используете его, чтобы определить, должен ли атрибут selected быть установлен для элемента option.

Пример здесь: http://jsfiddle.net/rniemeyer/YCQ9S/

1 голос
/ 20 апреля 2011

«значение» не является допустимым атрибутом для <select> тега HTML. Вы должны установить атрибут "selected" на самом <option>, чтобы он был выбран. Попробуйте что-то вроде этого: 

<script id="titleTemplate" type="text/x-jquery-tmpl">
    <option value="${ID}" selected="${checkSelected(this.data.ID)}">${Value}</option>
</script> 

<script>
function checkSelected(id)
{
   // logic to determine if this id should be the selected one.  
   return "selected";  //or not
}
</script>
...