ruby-on-rails - 预加载选定的选项以供选择

Question

我正在使用很多东西（Rails、Backbone.JS、HTML），但我不知道如何为选择加载选定的值。我在“编辑”表单中，我想从服务器（Rails API）加载信息并在我的表单中加载选定的选项。在 Rails 中，我们有一个 select 标签的助手，但我使用的是 jst.eco 文件，我不知道如何从服务器加载数据。

Answer 1

这是“一种”方式。定义一个模板：

<script type="text/template" id="category_options_template">
    <select id="CategoryId" name="CategoryId">
        <% _(categories).each(function(c) { %>
            <% if (c.get('IsSelected') == "selected") { %>
                <option value="<%= c.get('CategoryId') %>" selected="selected"><%- c.get('CategoryName') %></option>
        <% } %>
            <% if (c.get('IsSelected') == "") { %>
                <option value="<%- c.get('CategoryId') %>" id="<%- c.get('CategoryName') %>"><%- c.get('CategoryName') %></option>
        <% } %>
        <% }); %>
    </select>
</script>

获取应该在下拉框中结束的项目并将它们存储在一个数组中。例子：

var categories = new Array();
function fetch_categories() {
     $.ajax({
            url: '/GetCategories',
            dataType: "json",
            success: function (data) {
                for (i = 0; i < data.length ; i++) {
                    categories[i] = new category_model({
                        CategoryId: data[i].CategoryId,
                        CategoryName: data[i].CategoryName,
                    });
                }
            },
            error: function (data) {
                console.log('Error');
            }
        });
    }

var category_model;
function setup_category_model() {
        product_category_model = Backbone.Model.extend({
            idAttribute: 'CategoryId',
            defaults: {
                CategoryId: null,
                CategoryName: null,
                IsSelected: "",
            },
            urlRoot: '/Categories',
        });
    }

在初始化时传入模型的视图的渲染函数中：

var x = this.model.get('CategoryId');
for (i = 0; i < categories.length; i++) {
    categories[i].set('IsSelected', "");

    if (x && x == categories[i].get('CategoryId')) {
        categories[i].set('IsSelected', "selected");
    }
}
var categories_view = _.template($("#category_options_template").html(), {
    categories: categories,
    labelValue: 'Categories'
});