jQuery.tmpl 和 <select> 选项答案

【问题标题】：jQuery.tmpl and <select> optionsjQuery.tmpl 和 <select> 选项
【发布时间】：2011-08-09 12:29:42
【问题描述】：

我正在使用 jQuery 模板插件 (jquery.tmpl.js) 并且大部分情况下我都理解它，但我真的很难让它与选择元素的选项来自一个的元素一起工作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 选择的选定值。任何帮助将不胜感激。

【问题讨论】：

标签： jquery ajax binding jquery-templates

【解决方案1】：

您需要在选项元素上设置 selected 属性。

一种方法是将选项传递给包含您的 TitleId 的 {{tmpl}}，以便您可以将其与标题对象的 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）的子模板中访问它，并使用它来确定是否应在 option 元素上设置 selected 属性。

示例：http://jsfiddle.net/rniemeyer/YCQ9S/

【讨论】：

【解决方案2】：

“值”不是<select> HTML 标记的有效属性。您必须在<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>

【讨论】：

我需要这个反向功能来为一组已经构建的选择列表构建模板。谢谢