123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- /**
- * @see Model.url
- */
- $(function () {
- const onChange = (change, x) => {
- console.log('On change', change.changed);
- };
- // Create a model class.
- const TodoItem = Backbone.Model.extend({
- defaults: {
- description: "Empty todo",
- status: "incomplete",
- },
- // RESTful web service, RoR flavor.
- urlRoot: '/server/todos',
- toggleStatus(view) {
- if (this.get('status') === 'incomplete') {
- this.set('status', 'complete');
- }
- else {
- this.set('status', 'incomplete');
- }
- this.save();
- }
- }
- );
- // Create a model instance to load it by ID. Let it be global for console use.
- todoItem = new TodoItem({ id: 1 });
- // Listeners
- todoItem.on('change', onChange);
- // Skip listener during a change. Notice the value format.
- todoItem.set({ 'description': 'some other description' }, {silent: true});
- // Remove listener.
- //todoItem.off('change', onChange);
- /* Built-in events
- change - when any attribute is modified
- change:<attr> - when <attr> is modified
- destroy - when the model is destroyed
- sync - when the model successfully synced with the server
- error - when model save or validation fails
- all - on any event
- */
- // Check default attribute pre-fetch.
- const defaultDescription = todoItem.get('description');
- // Access the server at /server/todos/1 (urlRoot + '/' + item.id).
- const x = todoItem.fetch({ async: false });
- // Manipulate attributes.
- const description = todoItem.get('description');
- todoItem.set('status', 'complete');
- // Save on server.
- todoItem.save();
- // Destroy on server.
- // todoItem.destroy();
- // Create a view class.
- const TodoView = Backbone.View.extend({
- tagName: 'article',
- id: 'todo-view',
- className: 'todo',
- // Underscore templating.
- //language=HTML
- template: _.template(`
- <h3 class="<%= status %>">
- <input type="checkbox"
- <% if (status === "complete") print("checked") %> />
- <%= description %>
- </h3>
- `),
- events: {
- // Generates this.$el.('h3", 'click', alertStatus).
- 'click h3': 'alertStatus',
- 'change input': 'toggleStatus',
- },
- // Backbone.
- initialize() {
- // Backbone on() takes (event, callback, context)
- this.model.on('change', this.render, this);
- // Or without an explicit context, use a bound function.
- // this.model.on('change', this.render.bind(this));
- this.model.on('destroy', this.remove, this);
- },
- // Handle on destroy.
- remove() {
- this.$el.remove();
- },
- // Handle "click h3"
- alertStatus() {
- // Noisy.
- // alert('Hey, you clicked the H3');
- },
- // Handle "change input".
- toggleStatus() {
- this.model.toggleStatus();
- },
- render: function () {
- const attributes = this.model.toJSON();
- const html = this.template(attributes);
- // Since this.el is a DOMElement, we can just wrap it with jQuery instead
- // of using a jQuery selector like $('#todo-view') or $('.todo').
- // This is better because it is id- and class- independent.
- // $(this.el).html(html);
- // Backbone even gives a shortcut: the $el property.
- this.$el.html(html);
- },
- });
- // Create a view instance.
- const todoView = new TodoView({ model: todoItem });
- // Build view.
- todoView.render();
- // console.log(todoView.el);
- // Apply to the DOM.
- $('#app').html(todoView.el);
- });
|