javascript - 激活通过主干渲染的java脚本模板中的类

Question

我在 JavaScript 模板中有这个 bootstrap-select 的下拉过滤器，它是通过主干 View 呈现的。

<script type="text/template" id="activities-template">
            <div class="span22">
                <div class="members">
                    <select class="selectpicker" multiple title='<i class="icon-filter"></i> Filter By'>
                        <% _.each(project_users, function(user){ %>
                            <option id=<%= user.id %>><%= user.first_name %></option>
                         <% }); %>
                    </select>
                </div>
            </div>
</script>

当发出ajax请求时，它会获取projects_users并启用selectpicker开始时，所有下拉选项都将被取消选择。

@activities.fetch
     success: (activities) ->
        activities_html = that.template
          activities: _.groupBy activities.toJSON()
          has_more: that.activities.has_more
        that.$el.html activities_html

        $**('.selectpicker').selectpicker()**  //enable the selectpicker

当我单击处于选中状态的下拉项时，会发出ajax请求来获取数据...并再次启用selectpicker..从而丢失以前的状态(而不是显示最后选择的选项，它显示所有下拉选项均未选中)。

问题似乎是如何启用选择选择器，仅一次？

Answer 1

最简单的方法是在选择选择器上添加一个类，并且仅在该类不存在时才激活它:

@activities.fetch
  success: (activities) ->
    activities_html = that.template
      activities: _.groupBy activities.toJSON()
      has_more: that.activities.has_more
    that.$el.html activities_html

    select_picker = $('.selectpicker')
    unless select_picker.hasClass 'active'
      select_picker.addClass('active').selectpicker()   

请注意，只要您不重新渲染 Backbone View ，这就会起作用。如果你这样做，你就会失去“活跃”类别。这可能是您 <select> 的真正原因正在重置；如果是这种情况，那么您应该跟踪 View 中的当前选择，并更新模板以在渲染时使用它。例如，您可以将“active_id”变量传递给模板；如果存在，则设置要显示的选项，并将“active”类添加到 <select> 。