Question

我试图建立一个简单的木偶CompositeView。这就是我最终想要的东西：

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

在我的CompositeView我指定childViewContainer: select，我需要在此选项的选项中同时显示@name（可读性）和@id（相关事件）。由于默认div元素的性质，我可以在我的tagName中将option设为ItemView：

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

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

我还尝试在attributes上设置ItemView这样的属性：

attributes:
    value: "#{@id}"

技术上有效：选项填充了value=""属性，但内容未定义。请指教。

Answer 1

我在使用attributes时不确定部分。您应该传递将返回哈希的哈希或函数，如Backbone view.attributes docs中所述。

attributes:
    value: "#{@id}"

在旧钱中，它就像这样。这是jsfiddle。

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

Answer 2

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

我的猜测是，这不是模板的问题，而是你如何设置数据。据我所知，attributes没有ItemView选项，您必须使用正确形成的集合初始化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返回的变量，而与原始模型无关。

选择＆gt;选项上下文中的Marionette CompositeView

2 个答案: