javascript - 使用 Backbone.js 创建标签、下拉框

Question

了解backbone.js 创建模型、coll、视图的基础知识。但是如何在模型中为以下脚本创建属性以及如何在模板中查看它？

<table>
                <tr>
                    <td>
                       <label>T:</label>
                    </td>
                    <td>
                        <label>F</label>
                    </td>
                </tr>
                <tr>
                    <td>
                       <label>Fi:</label>
                    </td>
                    <td>
                        <input type="text" id="fi" readonly="true"/>
                    </td>
                </tr>             
                <tr>
                    <td>
                       <label>Ba:</label>
                    </td>
                    <td>
                        <select id="ba">
                           <option value="4">1200</option>
                           <option value="5">2400</option>
                           <option value="6">4800</option>
                           <option value="7">9600</option>
                           <option value="8">19200</option>                           
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>St:</label>
                    </td>
                    <td>
                        <input type="radio" name="st" value="0" checked="checked" > one
                        <input type="radio" name="st" value="1"> two
                    </td>
                </tr></table>

谁能帮我吗？

Answer 1

您可以将“ba”键值作为 {key:value} 数据存储在模型的一个字段中，如下所示：

var mdl = new Backbone.Model({ba:{1:1200, 2:2400}});

var SelectView = Backbone.View.extend({
                             template: _.template($("#mytemplate").text()),
                             render: function() {
                                 this.$el = $(this.el);
                                 this.$el.html(this.template(this.model.attributes));
                                 return this;
                             }
                            });
var view = new SelectView({model: mdl})

然后，模板

<script type="template/html" id="mytemplate">
  <select id="ba">
    <% for (key in ba) { %>
    <option value="<%=key%>"><%=ba[key]%></option>
    <% } %>
  </select>
</script>

我跳过了模板中的其他内容，并展示了一种方法，即如何使用选项创建“选择”。

您可以在此处阅读有关 Backbone.View.render的信息

关于模板引擎（来自下划线）here