What events are triggered when calling fetch() on a Backbone.js collection?

In my backbone.js app, there is a Trips collection that holds Trip models, which is working with LocalStorage. I am able to call Trips.create(form_attributes) to create and save a trip to the Todos store. When I first load my app, I call Trips.fetch({ success: trips_fetch_success }), and trips_fetch_success receives a response that shows the Trip models that the Trips collection holds. I have tried to bind refresh and change events to the Trips collection, but these events are not being caught

How to reference the event context for events defined in a backbone.js view?

I have my view set up with some events and I want to reference, for example, the button element that was clicked because it has a data attribute I need. I want to do it like so: events: { 'click #testGadget': 'fireEvent', ... }, fireEvent: function(){ var x = $(this).data('iCanHaz') } But the 'this' variable is scoped to the view itself. I know there's a way to accomplish what I'm looking to do but I can't seem to word my question in a way that returns any google hits.

Backbone.js Backbone - Update URL from view function

I'm stumbling through my first backbone project, and am trying to update the URL after a button element is clicked. I can manually set the URL via window.location.hash, but I assume this is not the correct way. Can anyone tell me what is the preferred way to update the URL? var AppView = Backbone.View.extend({ events: { "click #loadProject": "filterProject", }, filterProject: function(){ var projectID = $('#selectProject option:selected').val(); var orgID = '

Backbone.js:how can I cancel the view add parent element to the template

I know Backbone.js's View object has parameters like id, tagName, className. var DocumentRow = Backbone.View.extend({ tagName: "li", className: "document-row", }); It uses these for the insert template's parent element. When I do not set them, it will add a <div> to the template as the template's parent. But it really annoys me because sometimes I don't need the parent! All I need I already have in my template, so how can I cancel it?

Backbone.js Collection models is empty on console.log

I have a problem with collections in backbone.js, I'm doing something wrong. This is my Model var Point = Backbone.Model.extend({ defaults: { x: 0.0, y: 0.0, z: 0.0, }, validate: function(attrs) { if(!isNumber(attrs.x) || !isNumber(attrs.y) || !isNumber(attrs.z)) return "Discovered NaN point"; else return null; }, }); my collection: var TrackCollection = Backbone.Collection.extend({ model: Point, }); And the view: va

Backbone.js double rendering view

I'm trying to use the collection.reset() and am not getting the results i am expecting in the UI. The response returns 2 results, which is as expected. When i inspect my collection, it always tells me i have 2 results, which also is correct. However, in my html output, it just keeps appending the 2 newly fetch rows to the table. initialize: function() { _.bindAll(this,'buildRows','refreshTable'); this.template = _.template(maintmpl); this.collection = txnList; this.collection.

Backbone.js Backbone - Collection fetch returns undefined?

I have an application using backbone but whenever I call the fetch() method for the collection it returns undefined: // App (function () { window.app = {}; app.collections = {}; app.models = {}; app.views = {}; $(function () { app.collections.complaintTypes = new app.collections.ComplaintTypesCollection(); app.views.complaintTypesView = new app.views.ComplaintTypesView({ collection: app.collections.complaintTypes }); }); })(); // Collections (functi

Backbone.js How to avoid using Backbone-relational, a simple blog backbone app with comments relating to posts

Backbone relational is too messy for me and I can't seem to debug it. I am trying to avoid using this asset. I have two collections in my Backbone app. Voice.Collections.Posts and Voice.Collections.Comments This is my router: class Voice.Routers.Posts extends Backbone.Router routes: '': 'index' initialize: -> @collection = new Voice.Collections.Posts() @collection.reset($('#container').data('posts').reverse()) index:

List of names of models in a Backbone.js Collection

I'm trying to learn a little bit of backbone.js and I'm getting stuck on something I think should be fairly simple to figure out. How do I get a list of all model names in a collection? I'm even copy+pasting from the backbone tutorial: var Song = Backbone.Model.extend({ defaults: { name: "Not specified", artist: "Not specified" }, initialize: function(){ console.log("Music is the answer"); } }); var Album = Backbone.Collection.extend({ model: Song }

Backbone.js underscore templates in marionettejs Attribute not defined

I have got a problem with an underscore template. I fetch my current user on the startup of the application. So i create an instance by passing the id, which i take from a cookie. I pass this model to the view and fetch it there (it doesnt matter where i do this it is asynchronous). I have some i18n by the require.js plugin (var msg), so i use the function serializeData: if (this.model.attributes.name) { msg.model = this.model.toJSON(); } return msg; In my underscore template i want to

Backbone.js backbone alternative syntax

I come from php where I can right alternative syntax if else statements like <?php if(): ?> // conditional html goes here <?php endif;?> My question is if there is a way to do the same thing on a backbone view like <% if(condition): %> html code goes here ; <% endif; %>

Backbone.js Marionette - backbone how to use fetch correctly

This is a simple question but I can's see it answered in the Marionette Wiki. If I load data into a Collection via a url what format does that data have to be in? Does it have to have an ID like this: [ {id: "something", name: "Justin", hobbies: ""}, {id: "something2", name: "Fred", hobbies: ""} ] Is the ID field required for it to work properly?

Backbone.js Backbone event context not keeping current state

I use backbone events to bind a context ( a view object ) to an event handler, that kinda work but the problem is that none of the propreties that were set in the initialize method seems to follow along with the context when the event is triggered. The code bellow illustrate the problem: define(['backbone'], function( Backbone ) { var PageView = Backbone.View.extend({ /* Globals */ pageExist: false, initialize: function( options ) {

Backbone.js Status 501 - Method Not Implemented - when use Backbone

When I send a POST method to a valid URL with Backbone, the server is returning this: Method Not Implemented POST to /clientes/login not supported. What can it be? EDIT: If I use a form with method="post" without Backbone the server is returning Login Successfully, like it has to do. Thank you!

Backbone.js How should I represent groupings of emails with Backbone?

For example I have an application that is like an email and have various sections (groups of email): Inbox Sent Special x (some of them also exists in the inbox) Trash All those groups contains emails, let's call Email model. Now my question is: Should I use one collection for all the 4 groups? Or should I use one collection for each group?

Backbone.js Why / When I should use the Backbone-relational framework

I got a confusion sate now, any one clear my doubt and give more details about http://backbonerelational.org/ please? basically, Why we use the relational When we need to take a decision to use that Can't we achieve the same with Backone.js itself..? i have this scenario, i have the sample json like this: var navi = { "mainLinkLabel": "Home", "mainLinkHref": "/home.html", "sublinks": [ { "sublinkLabel": "subHome1", "sublinkHref": "/home/home1.htm

Backbone.js How to use Backbone.Model.save() promise with validation

I'm trying to use the promise returned from Backbone.model.save(). Actually, per spec, it returns a promise if valid and false if not. I'd like to use the return value, regardless of the type, in future deferred.done() and deferred.fail() calls. Like this: var promise = model.save(); $.when(promise).done(function() { console.log('success!'); }); $.when(promise).fail(function() { console.log('dang'); }); But, $.when() when passed a non-promise fires, done(), so, in the above, if the

Backbone.js Issue related to rendering multiple views through a single view

Question Updated I am implementing a search and result for the same in the same page. i have two seperate html views and views for search and result. Here is what is happening.. From my router the below view is loaded. This view will load two other views called search and result. I have included the respective html views in the seperate views. but when i run the proj, it displays nothing. Am i rendering the view in this file wrong ?? if i am rendering it wrong can somebody please te

Backbone.js Jasmine: Backbone.history.loadUrl Breaks Unrelated Tests

I've found the only way to navigate to different URLs to do view and router behavior tests is to use Backbone.history.loadUrl(). Backbone.history.navigate('#something', true) and router.navigate('#something, {trigger: true, replace: true} and any combination thereof do not work within the test. My application does NOT use pushstate. This works correctly within the context of a single test. describe('that can navigate to something as expected', function(){ beforeEach(function() { this.ser

Backbone.js Nested JSON to backbone model

I'm quite new to backbone.js and currently struggling with structuring the data properly. I have JSON that I need to map to the backbone model/collection. What's the best way to approach this kind of nested data? resultSet should be a collection of "result" models but how do I include other data like "resultURL", "clearKeywordUrl" etc. ? "resultUrl":"", "clearKeywordUrl":"", "resultTotal": 10, "nextPageUrl" : "" "resultSet":[ { "id":"", "title":"", "subTitle":null, "summary":"

Backbone.js BackboneJS - How to fetch external RSS feeds and display in View

I want to create a Backbone View which contains RSS feeds from different external pages ( I got permission!) - So what I would like to know is how to approach this?! Should I use the RESTful API thing since I either have to fetch the JSON or XML? And/or should I create a model and a collection? Something like: function($, Backbone) { var Model = Backbone.Model.extend({ url: "link/path to website where I want to fetch the RSS", defaults: { "title": '', "description": '',

Backbone.js BackboneJS - Add different view or layout when .fetch() returns error?

Can I add a different View or Layout in case of fetching an collection returns error? Right now, I'm doing it like this: this.artistsCollection.fetch({ error: function() { $('div.artistsDiv').append('<div class="tc"><span class="font-entypo icon-three-dots emptystate-big"></span></div>'); } }); But I was thinking of something like: error: function() { App.useLayout('artistLetter', 'artistLetter').setViews({ '.navMenu': this.navigation,

Backbone.js Backbone.Marionette Layouts and Navigation

I run on some interesting issue during working with nested Layouts. Lets go right to example. A index.html have just one region: ... <div id="screen" /> ... Now I have a login view which render on this region. When I succeed login I present home page(within ApplicaitonLayout) which contains so statistics. ApplicationLayout looks like this <div id="screen"> <header /> <nav id="menu" /> <section id="content"/> <footer /> </div> what

Backbone.js BackboneJS Youtube Player not firing video

I have this Backbone App where I want display videos from youtube in a view. I fetch the youtube video id dynamically through an API and a Model. So far so good. The Youtube Player gets rendered, but the Player gives me an error which indicates that it didnt recognize the VideoID even though when I console.log the video_id, it returns the correct video_id. So my View looks like this: beforeRender: function() { var artistvideosModel = new ArtistVideos.ArtistVideosModel(); artistvideosMo

Backbone.js backbone marionette logic and view reuse

I'm just on my way getting into Marionette. I've already had a backbone project so I just have to learn the additional stuff which appears to be a bit difficult. But maybe I'm just wrong in structuring my application. So I've my App which starts the application with new Marionette.Application();. On the next level I have modules oder sub-apps with controllers and their views/regions/templates/layouts depending on what I want to render. So much for that. How do I reuse some elements? For examp

Backbone.js Breadcrumb with Backbone.Marionette

I'm trying to implement breadcrumb using Marionette.CollectionView and Marionette.ItemView. I want to add breadcrumbs to the list from any part of the module. Here is the module which I wrote: App.module("BreadcrumbModule", function(BreadcrumbModule){ var instance; var Breadcrumb = Backbone.Model.extend({ defaults:{ link : '', name : '' } }); BreadcrumbModule.BreadcrumbList = Backbone.Collection.extend({ model : Breadcrumb }); var Brea

Backbone.js How to solve a conflict between browserify (Backbone based app) and require.js on the same page?

I have a backbone app up and running correctly. It's meant to be used as a widget in 3rd pages. Unfortunately, I just realised that one of these pages has already Backbone / underscore loaded. I get errors such as this: Uncaught TypeError: Cannot read property 'extend' of undefined Which usually appear when underscore has not been previously loaded. My typical view is like this: (normal Backbone view) ./view1.js var Backbone = require('backbone') var _ = require('underscore') var $ = re

Backbone.js Backbone stopListening

As I know the view.remove() function will call the stopListening() automatcially. However, the event posts:open cannot be unbind if the this.collection.stopListening() is not called. Please help What is missing? I think I miss understand something. // posts.js - Collection this.listenTo(App, 'posts:open', function() { console.log("hello world"); } ); // posts-item-view.js - ItemView events: { "click #open", "this.open"}, open: function() { App.trigger('posts:open', this.model); } // pos

Backbone.js Can I pass a global var to an underscore view?

I wonder if possible to do pass a global variable when rendering a template. Basically I get this variable each time I call a controller, so it looks like this: window.myVar = 0; //this var will change in a given moment when I make a request to the server.. so: //into the render method of my view, I have something like this: var template = _.template($("#myTemplate").html(), { varIwantToPass : myVar } ); this.$el.html(template); this way I can access it into the template with something

Backbone.js: defining el manually vs. automatically with id

My question is simple. Why does the following work (i.e. show an alert when the black square is clicked): $(document).on('ready', function() { var MainView = Backbone.View.extend({ el : "#id", events : { "click" : function() { alert("this works"); } }, }); var main_view = new MainView(); }); <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> <script src="https://ajax.

Backbone.js sinon - stub method of private variable

I have been tasked with writing the tests for the following Backbone view. However I did not write the code. In the following code example I want to stub/spy the update method so that I can check the function is called when the liked attribute of the view's model is changed, but I seem to not be able to target the method. Is it possible to stub the update function at all? When I run my tests it logs Hello but the test return the following error: AssertionError: expected update to have been ca

Backbone.js Marionette: how to use multiple controllers in AppRouter?

This would be a repeated question but I'm unable to find any practical answer on how to use multiple controllers in the AppRouter, for example in my code what I'm trying: define([ 'marionette', 'apps/contents/workpackage/workpackage_controller', 'apps/contents/overview/overview_controller', ], function( Marionette, WorkpackageController OverviewController ) { return Marionette.AppRouter.extend({ initialize: function(options) { this.wpcontroller = new WorkpackageController({region: opti

Backbone.js Backbone collection.where error

I assume I am doing something silly and clearly wrong, but I am baffled. Using CoffeeScript and marionette backbone, I want to create a methods on my collection that will set most models to selected and then set all selected to unselected. I assumed deselectAll: -> @where({selected: true}) would get me the selected models and I could iterate over that (for model in selected) and set the models. But I cannot get @where to work and instead get: Uncaught TypeError: _.matches is not a funct

Backbone.js How to initialize Model attributes only at time of save?

I want my model to have a unique generated id in specific format. I tried to do this in Backbone.Model.initialize method. https://gist.github.com/nirmaljpatel/7bbc891966f0bd1dbee5 However, initialize gets called on Collection.fetch as well. How do I allocate unique Ids on first time initialization only?

Backbone.js Why is UnderscoreJS throwing this error?

Just playing with Backbone and Underscore, I ran across this error: ReferenceError: can't find variable: search_label Here's the whole code: <!DOCTYPE html> <head> <title>Router Example</title> <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" type="text/javascript"></script>

Backbone.js How do I override Backbone.Router.execute function in its coffeescript child class?

I have a class which is extending Backbone.Router using the extends keyword in coffeescript. How can I override the Backbone.Router.execute method in my class? I tried adding a execute in my child class with the same method signature but it's still calling the parent class method instead of my custom method. jQuery -> class MyRouter extends Backbone.Router routes: "path/:id" : "myFunction" execute: (callback, args, name) -> console.log('hello') cons

Backbone.js Confused about the difference between TodoMVC app and todolist module in the backbone.marionette version

I'm in the process of structuring my first backbone.marionette app and there are some things I find confusing. In the backbone.marionette version of TodoMVC there seem to be two different modules performing the work of the App: First there is TodoMVC which is an instance of Backbone.Marionette.Application and then there is TodoMVC.TodoList which seems to be nothing more than a container for holding the controller and router. Why isn't the controller object simply added to the App object? Ano

Display the same Backbone.js Validation Errors Message in multiple locations on same page

So I've been using the n-time backbone.js validation (https://github.com/n-time/backbone.validations) for client side form validation with great success in my current project. The thing is that while it works great with errors messages below the field, I would like there to be, I need the error message to show up in two locations. So I did something like this All Errors are listed here: <span class="error" name="adultFName1Error" /> <br /><br /> .... further down the page..

Backbone.js Does jsfiddle import knockout & backbone automatically ?

Looking at this fiddle which uses knockout and backbone, are these libraries being automatically imported ? backbone and knockout fiddle Code here : Name: <input data-bind="value: name" type="text"/><br> Age: <input data-bind="value: age" type="text"/><br> Evil: <input type="checkbox" data-bind="checked: evil" /><br> <button id="foo">Change Model!</button> // create a plain old backbone model var backboneModel = new Backbone.Model({ name

Backbone.js Saving model on backbone localstorage

I am using jeromegn localstorage plugin https://github.com/jeromegn/backbone.localStorage. model.set(data); model.save(); console.log(model) // I am getting the json console.log(JSON.stringify(localStorage['Session'])); // I am getting the model's Id I am trying to save a model it seems though to save only my model's Id ?

Backbone.js Enforcing .destroy() in Backbone

I am attempting to do a DELETE request for a model view in Backbone. However, when the link is clicked, Backbone is doing a GET request. How can I force the model view to destroy the model instead of get it? Jade/HTML script(type="text/template", id="allContactsTemplate"). <td><%= first_name %></td> <td><%= last_name %></td> <td><%= email %></td> <td><%= description %></td> <td><a href="contacts/<%= _

Backbone.js Can't access model attributes from Backbone View

I'm walking into a large Backbone.js project so I'm still getting my bearings. My template, my-group-item.jhbs has: {{#if isComplete}} .row-fluid .span2 img.entity-image(src="/pictures/{{entityId}}.png") .span10 .row-fluid .span12 h3 {{entityName}} p My first variable {{totalFirst}} and my second variable {{totalValue}} {{/if}} My View is: module.exports = class MyItemView extends View className: -> templateData = @getTemplateData() primaryDat

  1    2   3   4   5   6  ... 下一页 最后一页 共 22 页