Question

问题是我想渲染具有value属性集和文本节点的选项元素。

因此，在我的ItemView中将tagName设置为选项不仅仅是这样做。我现在的解决方案是将其设置为选项，然后在ItemView构造函数中使用以下代码来设置值attibute：

 onRender: function () {
            this.$el.attr('value', this.model.get('name'));
        }

这很有效。

但还有其他方法吗？

我真正想做的就是告诉Marionette不要输出任何元素然后在我的ItemView模板中有这个：

<option value="<%= name %>"> <%= name %> </option>

这可能吗？

Answer 1

它可能但有点繁琐，默认情况下Backbone总是使用包装元素（可以通过使用tagName定义）但你必须明确地填充属性（正如你上面所做的那样）。

然而，可以使用稍微复杂的setElement方法来绕过包装器元素，这将使您能够在模板中保留所有标记，其中根据模型填充根节点上的属性。我也喜欢这种方法，因为我个人认为它可以更清晰地分离关注点。

点击此处查看示例 - Backbone, not "this.el" wrapping

不确定Marionette是否有内置的机制。

Answer 2

我不确定你应该出于各种不同的原因。

但我理解，在单个标记视图的用例中，Marionette / Backbone的工作方式是创建另一个标记并拥有视图，或者使用onRender和query来更新已为您生成的单个标记。

你可以让这个Object扩展ItemView，让我们称之为SingleTagView。基本上我正在扩展ItemView并使用一次更改来覆盖它的渲染功能。

而不是：

this.$el.html(html);

我在做：

var $html = $(html);
this.$el.replaceWith($html);
this.setElement($html);

以下是代码：

var SingleTagView = Marionette.ItemView.extend({
 render: function() {
  this.isClosed = false;

  this.triggerMethod("before:render", this);
  this.triggerMethod("item:before:render", this);

  var data = this.serializeData();
  data = this.mixinTemplateHelpers(data);

  var template = this.getTemplate();
  var html = Marionette.Renderer.render(template, data);
  // above is standart ItemView code
  var $html = $(html);
  this.$el.replaceWith($html);
  this.setElement($html);
  // this code above replaced this.$el.html(html);
  // below is standart ItemView code
  this.bindUIElements();

  this.triggerMethod("render", this);
  this.triggerMethod("item:rendered", this);

  return this;
}
});

如果要使用这种角度，请确保正确测试行为（事件处理，Dom泄漏，以前的不同流程：渲染事件）。

Answer 3

我会尝试：

var optionTag = Marionette.ItemView.extend({
  tagName: "option",

  initialize: function(){
    this.attributes = {
      value: this.model.get('name');
    }
  }
}

Backbone应该完成剩下的工作（即将attributes的内容放入HTML标记中）...

如何显示没有标记的项目视图

3 个答案: