在使用jQuery的Backbone.js中,在视图中选择元素的正确方法是什么?

时间:2012-01-19 21:59:26

标签: javascript jquery backbone.js

在下面的代码中,我有两个似乎正常工作的jQuery选择器。是否有理由做一个而不是另一个,还是有另一种首选方式?

var val1 = $("#username", this.el ).val()
var val2 = $(this.el).find("#username").val();

我知道不应该有多个具有相同id的元素,但如果有多个具有相同id的元素,那么在视图中仅选择元素的最佳方法是什么(请参阅下面的示例用户名)。

<body>
    Username: <input type="text" id="username" /><br />
    <br /><br />
    <div id="login">
        Username: <input type="text" id="username" /><br />
        <button id="loginButton">Login</button>
    </div>

    <script type="text/javascript">
        var LoginView = Backbone.View.extend({
            el: "#login",
            events: {
                "click #loginButton": "login"
            },

            login: function () {
                var val1 = $("#username", this.el ).val()
                var val2 = $(this.el).find("#username").val();

                console.log(val1);
                console.log(val2);
            }
        })
        var loginView = new LoginView();
    </script>    
</body>

---------------------更新------------------------ < / p>

我创建了jsFiddle示例,以便可以有其他工作示例来查看。 http://jsfiddle.net/BarDev/9QpKy/

2 个答案:

答案 0 :(得分:26)

为简洁起见,我通常使用Backbone-provided shortcut

this.$('#username')

这是$('#username', this.el);

的别名

但是,您使用的任何选择方法都可以正常运行。你在你的例子中得到的其他两种方式都很好。

答案 1 :(得分:2)

首先,我建议你不要在页面上有多个具有相同id的元素。尽量避免这种情况。为了找到一个元素,我认为find比选择传递上下文的元素更好,因为上下文对于性能原因是好的,但是findcontext快,所以它更好而且它也是更紧凑,更易读。

var val2 = $(this.el).find("#username").val();