Skip to content

Instantly share code, notes, and snippets.

@shi11

shi11/gist:2008429

Created Mar 9, 2012
Embed
What would you like to do?
backbone-form help/validation text
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="/lib/jquery-ui/flick/jquery-ui-1.8.14.custom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/src/styles/backbone-forms.css" type="text/css" media="screen" />
<script src="/lib/jquery-1.6.2.min.js"></script>
<script src="/lib/underscore-1.3.1.min.js"></script>
<script src="/lib/backbone-0.9.1.min.js"></script>
<script src="/lib/jquery-ui/jquery-ui-1.8.14.custom.min.js"></script>
<script src="/lib/backbone-forms.js"></script>
<script src="/lib/jquery-ui-editors.js"></script>
</head>
<body>
<h1>Test</h1>
<script type="text/javascript">
$(function() {
var LoginView = Backbone.View.extend({
events: {
"click button#loginButton": "login",
},
render: function() {
this.form = new Backbone.Form({
data: { id: 123, name: '', password: '' }, //Data to populate the form with
schema: {
name: { help:'TESTHELP', title:'username', validators: ['required'] },
password: { type: 'Password', validators: ['required'] }
}
});
var $button = $('<button type="button" name="login" id="loginButton">login</button>');
this.$el.append(this.form.render().el);
this.$el.append($button);
return this;
},
fieldAttrs: {
style: 'background: red',
title: 'Tooltip help'
},
login: function() {
this.form.commit();
}
});
window.loginView = new LoginView();
$('#container').html(loginView.render().el);
});
</script>
<div id="container"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment