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绑定到选择列表的最佳方法是什么？

（@ stackoverflow：创建新标签的声誉超过1500？真的吗？....＃sproutcore20 #handlebars）

Answer 1

您可能想为此创建自定义视图。我使用在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'))

您可以轻松发现，这是一次性选择。使用注释掉的代码将其升级为多选。

还有一个选择视图的拉取请求（同时由其作者关闭，因为它不使用新的隐喻代码），请参阅https://github.com/sproutcore/sproutcore20/pull/65。如果您还处于测试版3，此补丁应为您提供选择功能。

如何使用SproutCore 2.0和Handlebars绑定选择列表

1 个答案: