在Backbone.js视图中动态设置id和className

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Backbone.js视图中动态设置id和className相关的知识,希望对你有一定的参考价值。

我正在学习和使用Backbone.js。

我有一个Item模型和一个相应的Item视图。每个模型实例都有item_class和item_id属性,我希望将它们反映为相应视图的“id”和“class”属性。实现这一目标的正确方法是什么?

例:

var ItemModel = Backbone.Model.extend({      
});

var item1 = new ItemModel({item_class: "nice", item_id: "id1"});
var item2 = new ItemModel({item_class: "sad", item_id: "id2"});

var ItemView = Backbone.View.extend({       
});

我应该如何实现视图,以便视图的el将转换为:

<div id="id1" class="nice"></div>
<div id="id2" class="sad"> </div>

在我看到的大多数示例中,视图的el用作无意义的包装元素,在其中必须手动编写“语义”代码。

var ItemView = Backbone.View.extend({
   tagName:  "div",   // I know it's the default...

   render: function() {
     $(this.el).html("<div id="id1" class="nice"> Some stuff </div>");
   }       
});

所以当渲染时,一个人得到

<div> <!-- el wrapper -->
    <div id="id1" class="nice"> Some stuff </div>
</div>

但这似乎是浪费 - 为什么有外部div?我想让el直接翻译成内部div!

答案

Summary: dynamically set view attributes with model data

http://jsfiddle.net/5wd0ma8b/

// View class with `attributes` method
var View = Backbone.View.extend( {
  attributes : function () {
    // Return model data
    return {
      class : this.model.get( 'item_class' ),
      id : this.model.get( 'item_id' )
    };
  }
  // attributes
} );

// Pass model to view constructor
var item = new View( {
  model : new Backbone.Model( {
    item_class : "nice",
    item_id : "id1"
  } )
} );
  • 此示例假定您允许Backbone为您生成DOM元素。
  • 在设置传递给视图构造函数的属性(在本例中为attributes)之后调用model方法,允许您在Backbone创建el之前使用模型数据动态设置属性。
  • 与其他一些答案相反:不对视图类中的属性值进行硬编码,从模型数据中动态设置它们;不要等到render()设定attr vals;在每次打电话给render()时都不会重复设定attr vals;不必要地在DOM元素上手动设置attr vals。
  • 请注意,如果在调用Backbone.View.extend或视图构造函数(例如new Backbone.View)时设置类,则必须使用DOM属性名称className,但如果通过attributes哈希/方法设置它(如本例所示),则必须使用属性名称,class
  • 截至Backbone 0.9.9: 声明视图时... eltagNameidclassName现在可以定义为函数,如果您希望在运行时确定它们的值。 我提到这种情况,以防有可能作为替代使用如图所示的attributes方法的情况。

Using an existing element

如果您正在使用现有元素(例如将el传递给视图构造函数)......

var item = new View( { el : some_el } );

...然后attributes将不适用于该元素。如果尚未在元素上设置所需的属性,或者您不想在视图类和其他位置复制该数据,则可能需要将initialize方法添加到将attributes应用于el的视图构造函数中。像这样的东西(使用jQuery.attr):

View.prototype.initialize = function ( options ) {
  this.$el.attr( _.result( this, 'attributes' ) );
};

Usage of el, rendering, avoiding the wrapper

在我看到的大多数示例中,视图的el用作无意义的包装元素,在其中必须手动编写“语义”代码。

view.el没有理由需要成为“无意义的包装元素”。实际上,这通常会打破DOM结构。例如,如果视图类表示<li>元素,则需要将其呈现为<li> - 将其呈现为<div>或任何其他元素将破坏内容模型。您可能希望专注于正确设置视图元素(使用tagNameclassNameid等属性),然后再渲染其内容。

如何让Backbone视图对象与DOM交互的选项是开放的。有两个基本的初始场景:

  • 您可以将现有DOM元素附加到Backbone视图。
  • 您可以允许Backbone创建一个与文档断开连接的新元素,然后以某种方式将其插入到文档中。

您可以通过多种方式为元素生成内容(设置文字字符串,如示例中所示;使用模拟库,如Mustache,Handlebars等)。你应该如何使用视图的el属性取决于你正在做什么。

现有元素

您的渲染示例表明您具有要分配给视图的现有元素,尽管您没有显示视图的实例化。如果是这种情况,并且元素已经在文档中,那么您可能想要做这样的事情(更新el的内容,但不要改变el本身):

render : function () {
  this.$el.html( "Some stuff" );
}

http://jsfiddle.net/vQMa2/1/

生成的元素

假设您没有现有元素,并允许Backbone为您生成一个元素。您可能想要做这样的事情(但是建立事物可能更好,这样您的视图不负责了解自身之外的任何事情):

render : function () {
  this.$el.html( "Some stuff" );
  $( "#some-container" ).append( this.el );
}

http://jsfiddle.net/vQMa2/

模板

就我而言,我正在使用模板,例如:

<div class="player" id="{{id}}">
<input name="name" value="{{name}}" />
<input name="score" value="{{score}}" />
</div>
<!-- .player -->

模板表示完整视图。换句话说,模板周围没有包装器--div.player将是我视图的根或最外层元素。

我的播放器类看起来像这样(有一个非常简单的render()示例):

Backbone.View.extend( {
  tagName : 'div',
  className : 'player',

  attributes : function () {
    return {
      id : "player-" + this.model.cid
    };
  },
  // attributes

  render : function {
    var rendered_template = $( ... );

    // Note that since the top level element in my template (and therefore
    // in `rendered_template`) represents the same element as `this.el`, I'm
    // extracting the content of `rendered_template`'s top level element and
    // replacing the content of `this.el` with that.
    this.$el.empty().append( rendered_template.children() );
  }      
} );
另一答案

在你看来,做这样的事情

var ItemView = Backbone.View.extend({
   tagName:  "div",   // I know it's the default...

   render: function() {
     $(this.el).attr('id', 'id1').addClass('nice').html('Some Stuff'); 
   }       
});
另一答案

您可以在根元素上设置属性classNameidhttp://documentcloud.github.com/backbone/#View-extend

var ItemView = Backbone.View.extend({
   tagName:  "div",   // I know it's the default...
   className : 'nice',
   id : 'id1',
   render: function() {
     $(this.el).html("Some stuff");
   }       
});

编辑包含基于构造函数参数设置id的示例

如果视图的构造如上所述:

var item1 = new ItemModel({item_class: "nice", item_id: "id1"});
var item2 = new ItemModel({item_class: "sad", item_id: "id2"});

然后可以这样设置值:

// ...
className: function(){
    return this.options.item_class;
},
id: function(){
    return this.options.item_id;
}
// ...
另一答案

我知道这是一个老问题,但增加了参考。在新的骨干版本中,这似乎更容易。在Backbone 1.1中,使用下划线ensureElement在函数from source(请参阅_.result)中计算id和className属性,这意味着如果classNameid是函数,则将调用它,否则将使用其值。

所以你可以直接在构造函数中给出className,给出另一个将在className中使用的参数等等。很多选项

所以这应该工作

var item1 = new ItemModel({item_class: "nice", item_id: "id1"});
var item2 = new ItemModel({item_class: "sad", item_id: "id2"});

var ItemView = Backbone.View.extend({       
  id: function() { return this.model.get('item_id'); },
  className: function() { return this.model.get('item_class'); }
});
另一答案

其他示例未显示如何从模型中实际获取数据。要从模型的数据中动态添加id和class:

var ItemView = Backbone.View.extend({
   tagName:  "div",

   render: function() {
     this.id = this.model.get('item_id');
     this.class = this.model.get('item_class');
     $(this.el).attr('id',this.id).addClass(this.class).html('Some Stuff'); 
   }       
});
另一答案

您需要删除tagName并声明el。

'tagName'表示您希望骨干创建元素。如果元素已存在于DOM中,则可以指定以下内容:

el: $('#emotions'),

然后:

render: function() { 
     $(this.el).append(this.model.toJSON());
}
另一答案

尝试在initialize方法中分配值,这将直接将id和class动态分配给div属性。

var ItemView = Backbone.View.extend( {
    tagName : "div",   
    id      : '',
    class   : '',

    initialize : function( options ) {
        if ( ! _.isUndefined( options ) ) {
            this.id = options.item_id;
            this.class= options.item_class;
        }
    },

    render : function() {
        $( this.el ).html( this.template( "stuff goes here" ) ); 
    }
} );
另一答案

这是通过模型动态更改视图元素类的最小方法,并在模型更改时更新它。

var VMenuTabItem = Backbone.View.extend({
    tagName: 'li',
    events: {
        'click': 'onClick'
    },
    initialize: function(options) {

        // auto render on change of the class. 
        // Useful if parent view changes this model (e.g. via a collection)
        this.listenTo(this.model, 'change:active', this.render);

    },
    render: function() {

        // toggle a class only if the attribute is set.
        this.$el.toggleClass('active', Boolean(this.model.get('active')));
        this.$el.toggleClass('empty', Boolean(this.model.get('empty')));

        return this;
    },
    onClicked: functi

以上是关于在Backbone.js视图中动态设置id和className的主要内容,如果未能解决你的问题,请参考以下文章

Backbone.js 单个集合项视图

如何使用 Backbone.js 生成模型 ID

Backbone.js:查看状态和路由

结合d3.js和backbone.js

Backbone.js:在视图之间导航 - 销毁和重新创建

Backbone.js视图中$ el和el之间有什么区别?