4

我想在我的视图模板中添加一个 ID 和 CLASS 属性。这是我尝试但失败的方法。

$("#login").html( _.template( LoginTemplate ) );
        this.loginmodel = new LoginModel();
        this.loginview = new LoginView({
            el: $("#loginContainer"),
            model: this.loginmodel,
            className: "test"
        });

<div id="loginContainer">
    <div id="loginForm">
      <input class="user-input formContainerInput" id="username" placeholder="Username" required="required"/>
      <input class="user-input formContainerInput"  id="password" type="password" placeholder="Password" required="required"/>
      <a class="connection-btn" data-role="button">Connection</a>
      <a class="login-btn" data-role="button">Log In</a>
    </div>

我想使用视图而不是 html 本身来分配 id 和 class。我将如何做？

更新

尝试#1

loginview: function(){
    $("#login").html( _.template( LoginTemplate ) );
    this.loginmodel = new LoginModel();
    this.loginview = new LoginView({
        id: "#loginContainer",
        model: this.loginmodel,
        attributes:{ id:'Test', class: "myClass otherClass" }
    });
},

它甚至在“类”部分显示 aptana 错误。

甚至在主视图上尝试过，因为上面的代码是父视图。

var LoginView = Backbone.View.extend({
    events: {
        "click .login-btn": "Login",
        "click .connection-btn": 'Connect',
    },
    initialize: function(){
        //some code here
    },
    attributes: {
        id:"test"
    }
});
4

1 回答 1

11

使用View.attributes怎么样。

您可以指定如下内容：

attributes: {
  id:     "myId",
  class:  "myClass otherClass"
}

我没有尝试，但也许您也可以使用functions它来使其更加动态：

attributes: {
  id:     function(){ return "element-" + this.id; },
  class:  "myClass otherClass"
}

请注意，这只会影响view.elDOM 元素.. 不会影响它的任何子元素。

更新

上述解决方案仅在View.el匿名时有效。

因此，我看到的唯一可以在您的具体场景中使用的解决方案是View.el直接通过 JavaScript 操作，initialize()如下所示：

initialize: function(){
  this.$el.attr( "id", "my-id" );
  this.$el.attr( "class", "myclass1 myclass2" );
},

检查 jsfiddleView.el以了解操作属性的三种不同场景。

于 2012-04-20T08:58:59.507 回答