Marionette select>选项上下文中的 CompositeView

Question

我正在尝试设置一个简单的 Marionette 的 CompositeView。这就是我最终想要的：

%select#target-id
  %option{:value => "#{@id}"} = @name
  %option{:value => "#{@id}"} = @name 
  etc

在我的 CompositeView 中，我指定了 childViewContainer: select 并且我需要在 [=38] 的选项中同时显示 @name（为了可读性）和 @id（为了相关事件） =].由于默认 div 元素的性质，我可以在我的 ItemView:

中将 tagName 指定为 option

class New.TargetView extends App.Views.ItemView
    template: "path/to/template"
    tagName: 'option'

并且在模板中我只能传递要创建的选项元素的内容：= @name。这很好用，Marionette 为每个模型创建一个选项元素并用模型名称填充它。问题是我也不知道如何传递属性，因为我无法指定尚未创建的元素的属性。

我也试过在 ItemView 上设置一个 attributes 属性像这样：

attributes:
    value: "#{@id}"

它在技术上是可行的：选项填充有 value="" 属性，但内容未定义。请指教

Answer 1

CompositeView 和 ItemView 分别是需要 Marionette 集合和模型的视图。当您创建一个 CompositeView 时，您传递了一个模型集合，每个模型都将传递给相应的 ItemView.

我猜这不是模板的问题，而是您设置数据的方式的问题。据我所知，ItemView 没有 attributes 选项，您必须使用格式正确的集合初始化 CompositeView 或使用 serializeData 创建新属性ItemView.

上的方法

在第一种情况下，你会做这样的事情：

var SomeCompositeView = Marionette.CompositeView.extend({
    template: "your-template-name",
    childViewContainer: select
});

var SomeItemView = Marionette.ItemView.extend({
    template: "your-other-template",
    tagName: 'option'
});

// This collection can be retrieved from a database or anywhere else
// Just make sure that the models have the fields you want
var myCollection = new Backbone.Collection([{id: "someid1", name: "name1"}, {id: "someid2", name: "name2"}]);

var view = new SomeCompositeView({collection: myCollection});

在第二种情况下，你会有类似的东西，但在 ItemView 你会有：

var SomeItemView = Marionette.ItemView.extend({
    template: "your-other-template",
    tagName: 'option',
    serializeData: function () {
        return { someAttribute: "someValue" }
    }
}

请记住，对于第二种方法，ItemView 必须能够访问您要返回的值。 serializeData 仅用于重新格式化数据或对数据执行您无法在模板上执行的操作。该模板将只能访问您从 serializeData 返回的变量，与原始模型无关。

Answer 2

我不确定您使用 attributes 时的部分内容。您应该传递将 return 散列的散列或函数，如 Backbone view.attributes docs.

中所述

attributes:
    value: "#{@id}"

在旧货币中，它是这样工作的。这里是 jsfiddle.

attributes: function () {
    return {
        value: this.model.id
    };
}

Marionette select>选项上下文中的 CompositeView

Marionette CompositeView in the select>option context

javascript

backbone.js

marionette