更新

Question

我想在我的视图模板中添加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" }
    });
},

它甚至在“class”部分的aptana中显示错误。

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

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

Answer 1

如何使用View.attributes。

您可以指定以下内容：

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

我没有尝试，但也许您也可以使用functions使其更具活力：

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

请注意，这只影响view.el DOM元素..而不是任何子元素。

更新

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

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

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

Check the jsfiddle用于处理View.el属性的三种不同场景。

使用骨干视图动态添加模板上的ID和类

更新

1 个答案:

更新