3

我有一个 Marionette CollectionView，它将<select>ItemView 呈现为菜单，每个 ItemView 呈现为<option>. 我的问题是，当我在 CollectionView 上调用“更改”事件时（意味着用户选择了一个选项），我如何<option>从 ItemView 中获取所选的模型？

var singleView = Marionette.ItemView.extend({
        template: '#optionTemplate',
        tagName: 'option'
    });

var listView = Marionette.CollectionView.extend({
        itemView: singleView,
        tagName: 'select',
        id: 'my-selector',
        events: {
            'change': 'optionSelected'
        },
        optionSelected: function() {
          // I need to get the model from within this function

        }
    });
4

3 回答 3

5

option最干净的方法是使用相应模型的 ID 作为值来渲染标签： <option value="42">Forty Two</option>。然后，在更改时，获取该值并使用它通过 ID 从集合中检索模型collection.get(id)。一些元素，如option具有作为模型 ID 有意义的自然属性，但对于其他元素，您可以只使用data-id="42"属性。

.data另一种可行的方法是使用 jQuery 的方法或等效方法将模型实例与元素相关联，尽管我认为不如上述简单和干净。

于 2013-07-23T02:01:21.787 回答
2

无需添加自定义 ID 等，而且 danmactough 的答案也不起作用，所以最好忽略它。即使childEvents在 Marionette 中也无法使用选择/选项标签。

我的方法是只绑定到上的change事件CollectionView并匹配集合中模型的索引和:selected下拉列表中的元素：

var listView = Marionette.CollectionView.extend({
    itemView: singleView,
    tagName: 'select',
    id: 'my-selector',
    events: {
        'change': 'optionSelected'
    },
    optionSelected: function() {
      // The selected model:
      var model = this.collection.at($(':selected', this.$el).index()));
    }
});
于 2015-11-22T22:57:32.247 回答
0

我认为更好的、特定于木偶的解决方案是使用CollectionView 或 CompositeView 中可用modelEvents的或collectionEvents配置哈希。

var listView = Marionette.CollectionView.extend({
    itemView: singleView,
    tagName: 'select',
    id: 'my-selector',
    modelEvents: {
        'change': 'modelChanged'
    },
    modelChanged: function(e) {
      // "e" is the event
      // "this" is the ItemView
      // "this.model" is the model  
    }
});
于 2014-01-29T23:52:14.373 回答