Skip to main content

Posts

Showing posts with the label backbone.js

How does Backbone.js keep track of DOM elements without using IDs?

Background I have been using Backbone.js for some time and one aspect of it that impresses me is how it allows me to simplify, abstract and reuse DOM elements as 'views' . I have tried to read through some of the annotated source and am familiar with JQuery, but have little knowledge of how the DOM works on a deeper level. Question How does Backbone.JS tie DOM elements to views without assigning an id, class or other attribute to them? i.e. <ul> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul> I love that Backbone does this and would like to know how it does it! Source: Tips4all

Backbone.js: `extend` undefined?

Just getting started with Backbone.js. Simply including Backbone (either dev/production versions) causes the error: Uncaught TypeError: Cannot call method 'extend' of undefined on Line 128: // Attach all inheritable methods to the Model prototype. _.extend(Backbone.Model.prototype, Backbone.Events, { Source: Tips4all

dynamic key in JSON file (used by backbone.js models for example&hellip;)

I am trying to create a backbone.js model with dynamic keys but can't seem to get it done right. Here's my model: window.MyModel = Backbone.Model.extend({ myDynamicVar : "country", urlRoot: "api/myModel", defaults: { "id": null, this.myDynamicVar : "USA", "country": { "route":"test/test/test", "class":".usa2", "txt":"USA 2" }, "region": "California", "year": "", "description": "", "picture": "" } }); Here I am trying to have myDynamicVar replaced by its content in my model. Any thought how I could get this done? Thanks in advance, Jimmy

How do I track router change events in Backbone.js

I need to run a function every time the application switches URLs in Backbone.js, and I need to know the hashtag the URL has changed to. I'm assuming there is an event that I can bind to but I haven't been able to figure out which event and what object to bind to. Specifically I want to ship the new URL to an analytics application.

Using bootstrap-modal as Backbone.js view

I am attempting to create a Backbone.js view based on a Twitter bootstrap-modal, which makes use of Backbone's automatic event delegation via the events attribute of the view. Unfortunately, bootstrap-modal seems to break Backbone's event delegation as it clones the view HTML before displaying the modal: that.$element .appendTo(document.body) .show() My view: App.Views.ProjectsNav ||= {} class App.Views.ProjectsNav.NewProjectView extends Backbone.View events: { 'click .save': 'save', 'shown': 'shown' } save: (e) -> ... false shown: () -> App.Helpers.Forms.setFocus($(@el), true) false render: () -> $(@el).html(ich.nav_edit_project_template(@model.toJSON())) @$('.modal').modal({'show': true, 'keyboard': true, 'backdrop': true}) @ The corresponding (Mustache) HTML template: <div class="modal hide" style="display: none;

Problems with Accessing Attributes from a Backbone.js Model

I have a JSON File looking like this: JSON : { "clefs": [ {"title": "..", "path": ".."}, ... , {"title": "..", "path": ".."} ], .... "rests": [ {"title": "..", "path": ".."}, ... , {"title": "..", "path": ".."} ] } This is a nested JSON, right? So I try to convert that into Model/Collections nested into Backbone.js like this: Backbone.js : window.initModel = Backbone.Model.extend({ defaults: { "title": "", "path": "" } }); window.CustomCollection = Backbone.Collection.extend({ model: initModel }); window.Init = Backbone.Model.extend({ url : function(){ return "/api/data.json" }, parse: function(response) { clefs = new CustomCollection();

Using bootstrap-modal as Backbone.js view

I am attempting to create a Backbone.js view based on a Twitter bootstrap-modal, which makes use of Backbone's automatic event delegation via the events attribute of the view. Unfortunately, bootstrap-modal seems to break Backbone's event delegation as it clones the view HTML before displaying the modal: that.$element .appendTo(document.body) .show() My view: App.Views.ProjectsNav ||= {} class App.Views.ProjectsNav.NewProjectView extends Backbone.View events: { 'click .save': 'save', 'shown': 'shown' } save: (e) -> ... false shown: () -> App.Helpers.Forms.setFocus($(@el), true) false render: () -> $(@el).html(ich.nav_edit_project_template(@model.toJSON())) @$('.modal').modal({'show': true, 'keyboard': true, 'backdrop': true}) @ The corresponding (Mustache) HTML template: <div class="modal hide" style="display: none;