0

我有一个通过主干集合填充的选择框：

class Prog.Views.History extends Backbone.View

  template: JST['backbone/templates/shapes/history']
  tagName: "option"


  initialize: ->
    @model.bind('change:formatted', @render, this);

  render: ->
   $(@el).html(@template(history: @model))
   this

骨干/模板/形状/历史

<option value="<%=history.get('origin')%>"><%=history.get('origin')%></option>

这很好用，所有正确的数据都显示在选择框中，但我想要的第一个选项是“请选择”，即占位符......我考虑将一个名为“占位符”的记录注入到集合中但这似乎是一种迂回的方式。

这就是我所说的：

  appdenDropdown: (history) ->
    console.log("append trigger")
    view = new Prog.Views.History(model: history)
    $('select#history').append(view.render().el)

我怎么能默认这个？

4

1 回答 1

1

首先我认为这个实现不能正常工作，我认为渲染的结果会是这样的：

<option><option value="the_origin">the_origin</option></option>

注意双重选项。

一个适当的解决方案可能是这样的：

class Prog.Views.History extends Backbone.View
  tagName: "option"

  initialize: ->
    @model.bind('change:formatted', @render, this);

  render: ->
    $(@el).attr( "value", this.get( "origin" ) )
    $(@el).html( this.get("origin") )
    this

这里不需要模板。

关于包含“请选择”选项。

将直接在 HTML 中硬编码的“请选择”选项元素包含到选择元素中。

然后不用于this.$el.html()填充select but this.$el.append()，这将尊重实际的默认选项，并将在其后添加动态元素。

更新

例如，如果您的选择元素如下所示：

<select id="history"></select>

让它看起来像这样：

<select id="history">
  <option value="0" selected="selected">Please select...</option>
</select>

当您使用append添加动态选项元素时，占位符选项元素将保留。

于 2012-08-07T19:55:58.680 回答