sproutcore - 如何使用 SproutCore 2.0 和 Handlebars 绑定(bind)选择列表

Question

给定以下 SC.View 对象:

var view = SC.View.create({
  templateName: 'people',
  people: [],
  selectedPersonId: null});

以及以下人员 Handlebars 模板:

<select>
  {{#each people}}
  <option {{bindAttr id="id"}}>{{name}}</option>
  {{/each}}
</select>

将 selectedPersonId 绑定(bind)到选择列表的最佳方法是什么？

(@stackoverflow:1500+ 创建新标签的声誉？真的吗？....#sproutcore20 #handlebars)

Answer 1

您可能希望为此创建一个自定义 View 。我使用一个在 CoffeeScript 中实现的，看起来基本上是这样的

MyApp.SelectionView = SC.CollectionView.extend
    tagName: 'select'
    value: null

    willInsertElement: ->
        @_elementValueDidChange()

    change: ->
        @_elementValueDidChange()

    _elementValueDidChange: ->
        views = SC.View.views
        selectedOptions = @$('option:selected')
        ### Multiple selections
        @set('value', selectedOptions.toArray().map( (el) ->
            SC.get(views[el.id], 'content')
        ))
        ###
        @set('value', SC.get(views[selectedOptions.prop('id')], 'content'))

正如您可以轻松发现的那样，这是一个单一的选择。使用注释掉的代码将其升级为多选。

还有一个选择 View 的拉取请求(同时它被作者关闭，因为它不使用新的隐喻代码)，见 https://github.com/sproutcore/sproutcore20/pull/65 .如果你还在 beta3 中，这个补丁应该会为你提供选择功能。