Question

我的问题很平静，与set-dropdown-selected-value-with-backbone类似，但我不想通过jQuery操纵DOM。

为此，我所做的是： -

假设我的DropDown类型为UserType

var userType = backbone.Model.extend({
    idAttribute: "TypeId",
    defaults: {
        TypeId: null,
        TypeName: null,
        Selected: false
    }
});

在这里，我创建了一个额外的属性Selected，我在Handlebar模板中使用了以下属性。

<select id="userType" name="UserTypeId" class="input-medium form-control">
    {{#each MasterUserType}}
    <option id="{{TypeId}}" selected="{{Selected}}">{{TypeName}}</option>
    {{/each}}
</select>

好的，现在当我通过api say（示例）

获取我的数据时

[
   {
      "TypeId":1,
      "TypeName":"Admin"
   },
   {
      "TypeId":2,
      "TypeName":"User"
   },
   {
      "TypeId":3,
      "TypeName":"Super Admin"
   }
]

现在，我操纵我的变量MasterUserType变成如下所示： -

[
   {
      "TypeId":1,
      "TypeName":"Admin",
      "Selected":""
   },
   {
      "TypeId":2,
      "TypeName":"User",
      "Selected":"selected"
   },
   {
      "TypeId":3,
      "TypeName":"Super Admin",
      "Selected":""
   }
]

所以呈现的HTML是： -

<div class="controls">
    <select id="userType" name="TypeId" class="input-medium form-control">

        <option id="" selected="">Admin</option>

        <option id="" selected="selected">User</option>
        <option id="" selected="">Super Admin</option>


    </select>
</div>

但它仍然反映了第一项......

谁能告诉我有什么问题？还是其他任何选择？

最后，我们能否从其他更好的方式实现这一要求？

我尝试将“选择为真”替换为“但是不起作用。”

Answer 1

尝试更新模板，如下所示：

<select id="userType" name="UserTypeId" class="input-medium form-control">
      {{#each MasterUserType}}
        {{#if Selected}}
            <option id="{{TypeId}}" selected="{{Selected}}">{{TypeName}}</option>
        {{else}}
            <option id="{{TypeId}}">{{TypeName}}</option>
        {{/if}}   
      {{/each}}
</select>

使用Backbone设置Dropdown的默认选择

1 个答案: