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とクラスを割り当てたいです。どうすればいいですか？

アップデート

試み #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"
}

これはDOM要素にのみ影響することに注意してくださいview.el。その子には影響しません。

更新しました

上記の解決策は、View.elが匿名の場合にのみ機能します。

したがって、具体的なシナリオで機能する唯一の解決策は、次のようView.elにJavaScriptで直接操作することです。initialize()

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

属性を操作する3つの異なるシナリオについては、jsfiddleを確認してくださいView.el。

于 2012-04-20T08:58:59.507 に答える