如何根据backbone.js中字段的值选择表单元素

我有一个动态表单，从一个带有两个值的下拉字段开始：条形图和趋势图。如果选择条形图，我希望显示维度值的多选下拉框；如果选择趋势图，我希望显示单选下拉框

对于如下所示的模板和模型，只有在第一次保存模块后才会显示多选框。如何设置isBarChart变量，以便在保存模块之前使用它确定显示的选择框是多选还是单选

谢谢

从模板中：

%div.select_module_type
  Module type:
  %select{ :class => "module_type" }
    {{#select module_type}}
    %option{ :value => '' }
    %option{ :value => 'bar_chart' } Bar chart
    %option{ :value => 'trend_chart' } Trend chart  
    {{/select}}


%div.select_dimension_value
  Dimension value:
  {{#if isBarChart}}
  %select.dimension_value{ 'multiple' => true }
    {{#select dimension_value}}
    {{/select}}
  {{else}}
  %select.dimension_value
    {{#select dimension_value}}
    {{/select}}
  {{/if}}

//view initialize
initialize: function () {
  this.listenTo(this.model, 'change', this.render);
}

从模型中：

  isBarChart: ->
    return @get('module_type') == 'bar_chart'

从这个角度来看：

  showDimensionValuesSelector: (e) ->
    $(@el).find('div.select_dimension_value').hide()
    $(@el).find('div.date').hide()

    this_selector = $(@el).find('select.module_type')

    table = $(@el).find('select.table').val()
    return true if table == ''

    dimension_selector = $(@el).find('select.dimension[data-table="'+table+'"]')
    dimension = dimension_selector.val()
    return true if dimension == ''

    $(@el).find('div.select_dimension_value .preloader').css('display', 'inline')
    $(@el).find('select.dimension_value').hide()
    $(@el).find('select.dimension_value').html('')
    $(@el).find('div.select_dimension_value').show()
    $(@el).find('div.date[data-table="'+table+'"]').show()

    self = @
    $.get(
      '/dashboards/'+@model.get('dashboard_id')+'/dashboard_modules/dimension_values', 
      { table: table, dimension: dimension },
      (data, status, xhr) ->
        _.each(data, (item) ->
          if item.value != null and self.model.has('dimension_value') and item.value.toString() == self.model.get('dimension_value').toString()
            selected = 'selected="selected" '
          else
            selected = ''

          $(self.el).find('select.dimension_value').append('<option '+selected+'value="'+item.value+'">'+item.name+'</option>')
        )

        $(self.el).find('select.dimension_value').prepend('<option value=""></option>')
        $(self.el).find('select.dimension_value').show()
        $(self.el).find('div.select_dimension_value .preloader').hide()
      ,
      'json'
    )

---

由于您已经有了一个模型，您只需在模型上设置值，而无需将其保存到服务器：

在你看来：

events: {
  'change .module_type': handleModuleTypeChange
},

handleModuleTypeChange: function() {
  this.model.set({
    module_type: this.$el.find('.module_type').val()
  });
}

然后收听模型更改，重新播放模板：

%div.select_module_type
  Module type:
  %select{ :class => "module_type" }
    {{#select module_type}}
    %option{ :value => '' }
    %option{ :value => 'bar_chart' } Bar chart
    %option{ :value => 'trend_chart' } Trend chart  
    {{/select}}


%div.select_dimension_value
  Dimension value:
  {{#if isBarChart}}
  %select.dimension_value{ 'multiple' => true }
    {{#select dimension_value}}
    {{/select}}
  {{else}}
  %select.dimension_value
    {{#select dimension_value}}
    {{/select}}
  {{/if}}

//view initialize
initialize: function () {
  this.listenTo(this.model, 'change', this.render);
}

我不确定为什么在保存模型后必须渲染“选择”…如果是这种情况，您可能需要将尺寸零件移动到新视图中

==============================================================

编辑：2013年12月1日

一个简单的JSFIDLE：

这是一个简单的DOM事件更改模型的示例，然后模型更改触发视图渲染

在这种情况下，当模型属性“module_type”更改时，整个视图将重新呈现。并且，通过更改“模块类型”下拉列表，视图将在模型上设置新的“模块类型”值

---

很多和DOM相关的逻辑实际上都在模板中，当视图重新渲染时，模板知道模型的当前状态，然后相应地进行渲染

由于您已经有了一个模型，您只需在模型上设置值，而无需将其保存到服务器：

在你看来：

events: {
  'change .module_type': handleModuleTypeChange
},

handleModuleTypeChange: function() {
  this.model.set({
    module_type: this.$el.find('.module_type').val()
  });
}

然后收听模型更改，重新播放模板：

%div.select_module_type
  Module type:
  %select{ :class => "module_type" }
    {{#select module_type}}
    %option{ :value => '' }
    %option{ :value => 'bar_chart' } Bar chart
    %option{ :value => 'trend_chart' } Trend chart  
    {{/select}}


%div.select_dimension_value
  Dimension value:
  {{#if isBarChart}}
  %select.dimension_value{ 'multiple' => true }
    {{#select dimension_value}}
    {{/select}}
  {{else}}
  %select.dimension_value
    {{#select dimension_value}}
    {{/select}}
  {{/if}}

//view initialize
initialize: function () {
  this.listenTo(this.model, 'change', this.render);
}

我不确定为什么在保存模型后必须渲染“选择”…如果是这种情况，您可能需要将尺寸零件移动到新视图中

==============================================================

编辑：2013年12月1日

一个简单的JSFIDLE：

这是一个简单的DOM事件更改模型的示例，然后模型更改触发视图渲染

在这种情况下，当模型属性“module_type”更改时，整个视图将重新呈现。并且，通过更改“模块类型”下拉列表，视图将在模型上设置新的“模块类型”值

---

很多和DOM相关的逻辑实际上都在模板中，当视图重新渲染时，模板知道模型的当前状态，然后相应地进行渲染

我添加了coffeescript版本的更改，它会刷新，但在保存模块之前，维度_值仍然不会更改。我将添加视图，因为当模块类型更改但选择框的类型未更改时，维度值中的值将刷新。我不知道有没有办法把它添加到视图中？我不太明白你想在这里实现什么。你能发布一个JSFIDLE吗？顺便说一句，在我最初的回答中，我无意中在“.”和“module_type”之间留下了一个空格，这是错误的：所以我有一个表单。表单中的顶部字段是module_类型，它是ia下拉列表。有两种价值观；条形图和趋势图。还有另外一个字段，它被称为维度值（dimension_value）。如果模块类型==条形图，则维度值应为多选框。如果module_type==trend_chart，那么维度值应该是一个选择框。我不确定，因为这都是咖啡脚本和火腿条。我做了一个JSFIDLE：看看这是不是你要找的东西。我不是coffeescript/Handlebar专家，它只是带有默认下划线模板的纯主干。我添加了coffeescript版本的更改，它会刷新，但在保存模块之前，维度值仍然不会更改。我将添加视图，因为当模块类型更改但选择框的类型未更改时，维度值中的值将刷新。我不知道有没有办法把它添加到视图中？我不太明白你想在这里实现什么。你能发布一个JSFIDLE吗？顺便说一句，在我最初的回答中，我无意中在“.”和“module_type”之间留下了一个空格，这是错误的：所以我有一个表单。表单中的顶部字段是module_类型，它是ia下拉列表。有两种价值观；条形图和趋势图。还有另外一个字段，它被称为维度值（dimension_value）。如果模块类型==条形图，则维度值应为多选框。如果module_type==trend_chart，那么维度值应该是一个选择框。我不确定，因为这都是咖啡脚本和火腿条。我做了一个JSFIDLE：看看这是不是你要找的东西。我不是咖啡脚本/把手专家，它只是带有默认下划线模板的纯主干。