var MyView = Backbone.View.extend({
initialize: function(){
this.model.on('change', this.render, this);
},
render: function(){
//render処理
}
});
viewをremoveした際に自動で参照を解除するにはonではなくlistenToに変更するとよい。
initialize: function() {
this.listenTo(this.model, 'change', this.render);
}
違いはイベントをひもづけているのがmodel->viewからview->modelへ変わったこと。
なのでviewを削除すればview->modelへの参照も自動でなくなり、メモリも解放される。
参考Avoiding Common Backbone.js Pitfalls
var MyList = Backbone.Collection.extend({
initialize: function(){
//自分独自のイベントフックを登録
this.on('nothingNext', this.myEvent)
},
load: function(){
//何かを読み込む処理
if(次のページがなかったら){
//自分で作ったイベントを起動
this.trigger('nothingNext');
}
},
myEvent: function(){
console.log('俺独自のイベントだ');
}
});
var mylist = new MyList();
Viewも独自イベントに連動させる
var Btn = Backbon.View.extend({
collection: MyList,
initialize: function(){
//collectionの独自イベントが起動した時に一緒に動かしたいメソッドを登録
this.collection.on('nothingNext', hideMe);
},
hideMe: function(){
this.$el.hide();
}
});
CollectionをModelに変えてもできる
<img alt="sample" height="100" src="<?php echo 'TEMPLATE_DIR' . '/sample.jpg' ?>" width="100" />functions.phpに下を追加
define('DIR', get_bloginfo( 'template_directory' ));
/* imgタグを返す */
function img_tag($file, $alt = '', $opt = array()){
//ディレクトリ名は自分の環境に合わせて
$path = DIR . '/images/' . $file;
if(!empty($alt)){
$opt['alt'] = $alt;
}
$etc = '';
foreach($opt as $key => $value){
//引数のデータをそのまま属性に追加している。
//必要だったら値のチェックをしましょう
$etc .= ' ' . $key . '="' . $value . '" ';
}
$path = sprintf('
',
$path,
$etc
);
echo $path;
}
使い方
<?php
img_tag ('sample.jpg', 'alt属性', array('width' =>100, 'height' => 100)) ?>
//省略も可
//<img class="php" code="" src="テンプレまでのパス/images/sample.jpg'>
少しだけimgタグを書くのが楽になると思うんだけどどうだろう？
cssを追加するのも少しだけ楽になる↓
配列で渡せるようにしてもいいかも
function css_tag($file){
echo sprintf('',
DIR . '/stylesheets/' . $file
);
}
まあ、他のフレームワークのパクリなんだけどね