Question

我有一个简单的表单作为模板和一个初始化方法来根据需要更改textarea。问题是我想要定位textarea以便在其上使用Jquery但Backbone不会让我。例如，如果我想要this.$('textarea').css('height', '1em');而是在控制台中返回以下内容：

[prevObject: jQuery.fn.jQuery.init[1], context: <form>, selector: "textarea"]
context: <form>
length: 0
prevObject: jQuery.fn.jQuery.init[1]
selector: "textarea"
__proto__: Object[0]

如果我尝试this.$el.find('textarea').css('height', '1em')，我会得到类似的结果。

这是我的代码：

模板

<script id="reply-form" type="text/template">
      <fieldset>
        <textarea rows="3"></textarea>
        <input type="button" class="cancel btn btn-small" value="Cancel">
        <input type="button" class="send btn btn-success btn-small" value="Send">
      </fieldset>   
</script>

views.js

App.Views.Form = Backbone.View.extend({
    tagName: 'form',
    initialize: function() {
        this.startTextarea();
    },

    startTextarea: function(){
        console.log(this.$('textarea').css('height', '1em'));
    },

    template: _.template( $('#reply-form').html() ),

    render: function() {
        this.$el.html( this.template() );
        return this;
}

可能会发生什么？

Answer 1

您无法在initialize函数中以这种方式真正修改HTML，因为模板尚未呈现 - 它不会找到任何内容。

我认为这样做的方法是将样式内容放在模板中，或放在CSS文件中 - 这就是它所属的位置。但是，如果您需要在加载视图时动态修改模板，则必须在编译模板之前执行此操作。有关示例，请参阅here。

startTextarea: function(){
    // get the template HTML
    var tmpl = $('#reply-form').html();

    // modify the template
    tmpl = $(tmpl).find('textarea').css('height', '1em')[0].outerHTML;

    // compile the template and cache to the view
    this.template = _.template(tmpl);
}

Jquery选择在Backbone中的模板元素中不起作用

模板

views.js

1 个答案: