1

我有一个简单的表单作为模板和一个根据需要更改文本区域的初始化方法。问题是我想定位 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>

视图.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;
}

会发生什么？

4

1 回答 1

2

您不能在initialize函数中以这种方式真正修改 HTML，因为模板还没有被渲染——它不会找到任何东西。

我认为这样做的方法是将样式的东西放在模板中，或者放在 CSS 文件中——这确实是它所属的地方。但是，如果您需要在加载视图时动态修改模板，则必须在编译模板之前进行。有关示例，请参见此处。

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);
}
于 2012-11-30T04:42:22.867 回答