Backbone View入門
2356 ワード
BackboneはJavaScriptのフレームで、モデル-ビュー-コントローラ(model-view-control,MVC)種類のアプリケーションと単一ページのインターフェースを作成するために使用できます.それはJavaScriptアプリケーションをより明確に構造化しようとしています. View イベント、 Model コレクションと Routerさん、だから初心者がBackboneに接触するとかえって散らかってしまいます.加えて、インターネットで探してきたいくつかの初歩的な教程は、Event、Model、CollectionまたはRouterを取り上げました.実は初心者は一番簡単な真実がほしいです.だから、最初の例はViewだけ使って、他のものはしばらく置いておきます.
BackboneはUnderscoreに強く依存しています.jQueryはオプションですが、DOMを操作するのに便利です.
最も簡単な例は、二段階に分けて歩く.
1. Backbone.View.exted(obj)はViewタイプを作成します.2.前のステップで得られたViewを作成します.実用化時は前のステップobj.initialize()を呼び出します.
上の実際の体験があって、私達は更に更に進むことができて、行間のテンプレートとページの中で声明するテンプレートを使って、テンプレートは値のを触って塗りつぶします.
私たちはAppViewを作る時に上記の属性を導入できます.
Backboneの対象は初期化後にまず実行されるのは
BackboneはUnderscoreに強く依存しています.jQueryはオプションですが、DOMを操作するのに便利です.
最も簡単な例は、二段階に分けて歩く.
1. Backbone.View.exted(obj)はViewタイプを作成します.2.前のステップで得られたViewを作成します.実用化時は前のステップobj.initialize()を呼び出します.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
</head>
<body>
<div id="container">Loading...</div>
</body>
</html>
<script>
var AppView = Backbone.View.extend({
el: '#container',
initialize: function(options) {
this.render();
},
render: function() {
this.$el.html("Hello World");
}
});
// AppView ，
setTimeout(function(){
var appView = new AppView();
}, 1000);
</script>上の実際の体験があって、私達は更に更に進むことができて、行間のテンプレートとページの中で声明するテンプレートを使って、テンプレートは値のを触って塗りつぶします.
私たちはAppViewを作る時に上記の属性を導入できます.
var appView = new AppView({el: $('#container')});Backboneの対象は初期化後にまず実行されるのは
initialize メソッドは、初期化方法では、親の初期化を呼び出すことがあります. initialize 方法の1行に1行を足すthis.constructor.__super__.initialize.apply(this);