来自 json 的模型字段

Question

我有模范用户

window.User = Backbone.Model.extend({
    defaults: {
        "id": null,
        "login":  "",
        "password":  "",
        "role":  ""
      }
});

window.UserCollection = Backbone.Collection.extend({
    model: User
});

json 回复：

{
  "id":1,
  "login":"log1",
  "password":"psw1",
  "role":
    {
      "id":1,
      "name":"user"
    }
},

我对所有角色都有 json 回复：

[{"id":1,"name":"user"},{"id":2,"name":"admin"}]

如何创建包含所有角色的下拉表单，并在创建新用户时将其设置为模型用户

Answer 1

要在呈现时创建下拉列表并select正确的选项，您可以定义一个模板，然后在呈现视图时使用。

模板：

<script type="text/html" id="rolesSelectTemplate">
    <select id="selectRole" name="userRole">
        <% _(allRoles).each(function(aRole) { %>
        <% if (aRole.get('IsSelected') == "selected") { %>
        <option value="<%= aRole.get('id') %>" id="<%- aRole.get('id') %>" selected="selected"><%- aRole.get('name') %></option>
        <% } %>
        <% else { %>
        <option value="<%- aRole.get('id') %>" id="<%- aRole.get('id') %>"><%- aRole.get('name') %></option>
        <% } %>
        <% }); %>
    </select>
</script>

函数：

render: function(){
  // do something first

  // Assuming you are able to init the users and roles collection with JSON

  var selectedRole = this.model.get('role');

  allRoles.each(function (aRole) {
     aRole.set('IsSelected', "");
     if (selectedRole && selectedRole.id == aRole.get('id') /* if the nested role attribute is a simple object or else use selectedRole.get('id')*/) {
        aRole.set('IsSelected', "selected");
     }
  });

  var allRolesDropDown = _.template($("#rolesSelectTemplate").html())({
      allRoles: allRoles.models,
  });

  $("#allRolesDropDownElement").append(allRolesDropDown);

  // do something else
  return this;
}

来自 json 的模型字段

Model fields from json

javascript

jquery

json

backbone.js