1

テンプレートとして単純なフォームと、必要に応じてテキストエリアを変更するための初期化メソッドがあります。問題は、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;
}

何が起こっているのでしょうか？

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 に答える