partial.js logo
Latest version
v1.3.1 (RC2)

How do "views" work?


"Views" serve for renderig of HTML. You can render "view" in "view" and "view" is rendered into the layout at the end.



Views


Repository vs. Model

Into views you can transfer variable through controller.repository or controller.view('name', model).

function some_action() {
	var self = this;

	self.repository.firstname = 'Peter';
	self.repository.lastname = 'Sirka';

	self.view('my-view', { firstname: 'Janko', lastname: 'Hrasko' });
}

Repository vs. Model

View: /views/my-view.html

@{repository.firstname} or @{model.firstname}

Layout: /views/_layout.html

controller.repository works also in a layout. Model doesn't work because model is for current view and view can contains many other views.

In layout only works: @{repository.firstname}

<!-- The model can be only for current view, why? -->
<div>@{view('footer', { company: '858project.com' })}<div>



Define a layout

You can define a lot of layout files.
Example

<!DOCTYPE html>
<html>
<head>
    @{meta}
    <meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=10" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="viewport" content="width=1024, user-scalable=yes" />
	<meta name="robots" content="all,follow" />
	@{head}
	@{css('default.css')}
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	@{js('default.js')}
	@{favicon('favicon.ico')}
</head>
<body>
	@{view('header')}
	<div class="content">
		<!-- Here is rendered a content from views -->
		@{body}
	</div>
	@{view('footer')}
</body>
</html>

Define a view

You can create a lot of view files.
Example

@{meta('Title', 'Description (optional)', 'Keywords (optional)')}

<div>Hello World!</div>

@{template('products', [{ name: 'A', price: 23.32 }, { name: 'B', price: 32.10 }])}
@{content('adv')}

@{template('users', model)}

<!-- Look into definition of custom helper -->
@{customHelper('Hello', 2 + 3)}

<!-- You can define multi-line command -->

@{template('products', [{ name: 'A', price: 23.32 },
                        { name: 'B', price: 32.10 },
                        { name: 'C', price: 15.22 }])}

Views conditions

Views supports simple conditions. Example:
@{if (user === null)}
	<div>sign in</div>
@{else}
	<div>sign up</div>
@{endif}

<br />
<br />

@{if (model.name === 'Peter')}
	<div>Here is Peter</div>
@{endif}

<br />
<br />

@{if (model.name !== 'Peter')}
	<div>Here is @{model.name}</div>
@{endif}

	

Dynamic rendering

View function can compile a view template dynamically.
<!-- VIEW -->
@{view('
@{model.name}
', { name: 'Peter Širka' })} <!-- TEMPLATE --> @{template('
{name}
', [{name: 'Peter Širka'},{name: 'Steve Jobs'}])}

Define custom helper

Write code into a definition.

framewoker.helpers.customHelper = function(str, num) {
	// this === controller
	return str + ' = ' + num;
};

Prefixes

Prefixes for mobile devices
EXAMPLE: Prefixes (multi-devices development)

Auto-bindings models

Auto-bindings models

Controller

function view_contactform() {
	this.view('contactform', { Email: '@', Name: 'Ano<n>ym' });
};

View

Email: @{input('Email')}
Name: @{input('Name')}

Output

Email: <input type="text" name="Email" value="@" />
Name: <input type="text" name="Name" value="Ano&lt;n&gt;ym" />

Download Sublime Text 2 syntax


Download syntax (4.9 kB)
Download the file, unpack and read readme.txt
partial.js syntax for Sublime TExt 2 editor