web-dev-qa-db-ja.com

バックボーンのビューでsetElementを使用する

次の this チュートリアルは問題ありませんでしたが、バックボーン0.9と新しいsetElementコマンドを使用してもう一度実行することにしました。

_<script type="text/javascript" id = "test" >
    SearchView = Backbone.View.extend({
        initialize: function(){ 
            this.render();
        },
        render: function(){
            var template = _.template( $("#search_template").html(), {} );

     //Right here

            this.setElement( template );

        },
        events: {
            "click input[type=button]": "doSearch"
        },
            alert( "Search for " + $("#search_input").val() );
        }
    });

    var search_view = new SearchView({ el: $("#search_container") });
</script>
_

以前はthis.el.html(template)を使用していましたが、新しいsetElementコマンドを使用するにはどうすればよいですか？

私が現在持っているものは機能しません、表示されるはずの検索フィールドは機能しません。

javascriptbackbone.jsunderscore.js
17
VicVu

Backbone.js v0.9のドキュメントから：

setElement

view.setElement(element)

バックボーンビューを別のDOM要素に適用する場合は、setElementを使用します。これにより、キャッシュされた$ el参照も作成され、ビューの委任されたイベントが古い要素から新しい要素に移動されます。

バックボーンビューの「el」プロパティは、実際にページにレンダリングされるビューのhtml部分を表します。ビューを実際にページにレンダリングするには、ビューをページ内の新しい要素として追加するか、ページ内の既存の要素にアタッチする必要があります。

以前に使用したコードが機能する理由は、コンストラクターでビューの「el」プロパティを設定して、IDが「search_container」の既存の要素にアタッチするためです。

var search_view = new SearchView({ el: $("#search_container") });

以前に使用した方法：

$(this.el).html(template);

テンプレートhtmlをページ上の既存の要素に追加していたために機能しました。

SetElementを次のように使用した場合：

this.setElement( template );

実際には、IDが「search_container」の要素からテンプレートのhtmlまで、「el」の既存の値を上書きしていました。また、テンプレートがページに追加されていないか、まだ存在していないため、ビューは表示されません。

引き続きsetElementを使用し、それをID "search_container"にアタッチし続ける場合は、ビューを初期化するときに呼び出します。

initialize: function(){ 
  this.setElement( this.el );
  this.render();
}

このようにして、次のように、後で「$ el」参照をキャッシュできます。

render: function(){
  var template = _.template( $("#search_template").html(), {} );
  this.$el.html(template);
}

お役に立てれば！

48
shanewwarren