1. Requirements
2. Installation
3. Usage
4. API
5. Resources

Yii Extension: Quickly Add Dynamic Content Without Writing JS Or Additional Actions! Quickly bind JQuery events and much more… In other words Asteroid gives the ability to lazy load your partials either on load or bound to events like 'click' or 'mouseenter'.

Requirements ¶

1. Yii 1.8 or above
2. PHP 5.3 or above

Installation ¶

1. Place the Asteroid directory in protected/extensions
2. In your desired Controller Class add the Asteroid behavior like so:

class MyController extends Controller
{
	public function behaviors() {
	   return array('EAsteroid' =>
		   array('class'=>'ext.Asteroid.behaviors.EAsteroid')
	   );
	}
…
}

Usage ¶

For purposes of the following examples we will assume we have the below controller and views:

controllers/SampleController.php ¶

class sampleController extends Controller
{
	public function behaviors() {
		return array('EAsteroid' => array('class' => 'ext.Asteroid.behaviors.EAsteroid'));
	}
	…
		
	public function actionTestUI()
	{
		…
		$this->render('index');
	}
		
		…
}

views/sample/index.php ¶

[html]
<div id="clickMe">Click Here</div>
	
<div id="myDiv1">
	
</div>
	
	
<div id="myDiv2">
	
</div>
	
	
<div id="myDiv3">
	
</div>

/views/sample/_p1.php ¶

[html]
<h1><?php echo $var1; ?></h1>
<h2><?php echo $var2; ?></h1>

/views/sample/_p2.php ¶

[html]
<h1><?php echo $var3; ?></h1>
<h2><?php echo $var4; ?></h1>

/views/sample/p3GridView.php ¶

[html]
<?php $this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'airport-grid',
	'dataProvider'=>$model->search(),
	'filter'=>$model,
	'columns'=>array(
		'id',
    	'sample_code',
    	'name',
		array(
			'class'=>'CButtonColumn',
		),
	),
)); ?>

Example 1: Using replace() append() And prepend() ¶

Lets say we want to dynamically load the content of the partial view _p1.php into the div "#myDiv1" of test view.

public function actionTestUI()
{
	$this->asteroid('a1')
			->replace('#myDiv1', '_p1', function(){ return array('var1'=>'Yeah!', 'var2'=>'Thats right!'); })
	->orbit();
	
	$this->render('test');
}

Now lets say we have the same scenario but we would also like to append some content to the div "#myDiv2"

public function actionTestUI()
{
	$this->asteroid('a1')
			->replace('#myDiv1', '_p1', function(){ return array('var1'=>'Yeah!', 'var2'=>'Thats right!'); })
		 ->asteroid('a2')
		 	->append('#myDive2', '_p2', function(){ return array('var3'=>'Im Here!', 'var4'=>'You know it!'); })
	->orbit();
	
	$this->render('test');
}

We could also have chosen to prepend

public function actionTestUI()
{
	$this->asteroid('a1')
			->replace('#myDiv1', '_p1', function(){ return array('var1'=>'Yeah!', 'var2'=>'Thats right!'); })
		 ->asteroid('a2')
		 	->prepend('#myDive2', '_p2', function(){ return array('var3'=>'Im Here!', 'var4'=>'You know it!'); })
	->orbit();
	
	$this->render('test');
}

Example 2: Dynamically Rendering An Yii Grid View ¶

When your partial contains a widget like CGridView that registers scripts and or style sheets to POS_HEAD you should use this approach.

public function actionTestUI()
{
	$this->asteroid('a1')
			->renderMethod('render')
			->replace('#myDiv3', '_p3GridView',  function() { 
				$sample = new Sample(); 
				if(isset($_GET['Sample'])) $sample->attributes = $_GET['Sample']; 
				return array('model' => $sample); 
			  })
	->orbit();
	
	$this->render('test');
}

Exmaple 3: Using onEvent() ¶

Lets say we want to replace the content of div "#myDiv1" with the partial _p1.php when I click the div "#clickMe"

public function actionTestUI()
{

	$this->Asteroid('a3')->onEvent('click', '#clickMe')	
			->replace('#myDiv1', '_p1', function() { return array('var1'=>'Yeah!', 'var2'=>'You clicked me…'); })
	->orbit();

	$this->render('test');
}

Now lets say we want to execute some additional JavaScript on our click event.

public function actionTestUI()
{
	$this->Asteroid('a3')->onEvent('click', '#clickMe')	
			->execJs("alert('I know you would click');")
			->replace('#myDiv1', '_p1', function() { return array('var1'=>'Yeah!', 'var2'=>'You clicked me…'); })
	->orbit();

	$this->render('test');
}

Exmaple 4: Using sendVars() ¶

Lets say we would like to keep track of the number of clicks on a particular DOM element and update the view with the total. Every time a user clicks '#clickMe' we will replace the content of '#myDiv1' with the incremented count.

public function actionTestUI()
{
   $this->Asteroid('counterExample')
     ->onEvent('click', '#clickMe')
     ->sendVars(function($vars) {
        if(empty($vars)) $vars = array('count'=>0);
        $vars['count']++;
        return $vars;
     })
     ->replace('#myDiv1', '_myPlace3', function($vars) {
        return array('var1'=>'Cool I Clicked that', 'var2'=> . $vars['count'] . 'X');
     )}
   ->orbit();

Exmaple 5: Using useBelt() ¶

The 'useBelt' method provides a way to keep things DRY, allowing you to aply groups of Asteroid actions you have defined.

To use 'useBelt' you will need to create at least one instance of EAsteroidBelt. Lets start there and create a folder in 'protected' called 'asteroidBelts' ('webapp/protected/asteroidBelts'). We will use this folder to store our Belts. Now we will create a new class called 'UiHelperAB' and save it to a file called 'UiHelperAB.php' in the 'asteroidBelts' directory we just created. Your class will look something like this:

class UiHelperAB extends EAsteroidBelt
{

	public function a1a2($myvar)
	{
		$this->Asteroid('a1')
        	->replace('#myDiv1', '_p1', function() use ($myvar) { return array('var1'=>'Yeah!', 'var2'=>$myvar); })
         ->Asteroid('a2')
            ->append('#myDive2', '_p2', function() { 
                 return array('var3'=>'Im Here!', 'var4'=>'You know it!'); 
            })
	}

	public function grid()
	{
		$this->Asteroid('grid')
            ->renderMethod('render')
            ->replace('#myDiv3', '_p3GridView',  function() { 
				$sample = new Sample(); 
                if(isset($_GET['Sample'])) $sample->attributes = $_GET['Sample']; 
                return array('model' => $sample); 
			})
	}

}

Cool we have an Asteroid Belt, now lets use it in our controller. Lets say we want to use a1a2:

public function actionTestUI()
{
	$myvar = "I did this with an Asteroid Belt!";
	$this->Asteroid('UIHelper')->useBelt(
		'application.asteroidBelts.UiHelperAB', 'a1a2', array($myvar)
	)
	->Asteroid('someID')->...
	->orbit();		
	...
}

Great, but what if we want to use 'a1a2' and 'grid' in our controller action. We could just repeat the above line again and swap out the method name but there is another way. Lets take a look:

public function actionTestUI()
{
	$myvar = "I did this with an Asteroid Belt!";
	$this->Asteroid('UIHelper')->useBelt(
		'application.asteroidBelts.UiHelperAB', 
	 	array(
			array('a1a2', array($myvar)),
			array('grid', array()),
		)
	)
	->Asteroid('someID')->...
	->orbit();	
	...
}

API ¶

Public Methods ¶

Resources ¶

GitHub

WebPage

API DOCS