Search Results

Search found 5726 results on 230 pages for 'backbone views'.

Page 3/230 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • json data not rendered in backbone view

    - by user2535706
    I have been trying to render the json data to the view by calling the rest api and the code is as follows: var Profile = Backbone.Model.extend({ dataType:'jsonp', defaults: { intuitId: null, email: null, type: null }, }); var ProfileList = Backbone.Collection.extend({ model: Profile, url: '/v1/entities/6414256167329108895' }); var ProfileView = Backbone.View.extend({ el: "#profiles", template: _.template($('#profileTemplate').html()), render: function() { _.each(this.model.models, function(profile) { var profileTemplate = this.template(this.model.toJSON()); $(this.el).append(tprofileTemplate); }, this); return this; } }); var profiles = new ProfileList(); var profilesView = new ProfileView({model: profiles}); profiles.fetch(); profilesView.render(); and the html file is as follows: <!DOCTYPE html> <html> <head> <title>SPA Example</title> <!-- <link rel="stylesheet" type="text/css" href="src/css/reset.css" /> <link rel="stylesheet" type="text/css" href="src/css/harmony_compiled.css" /> --> </head> <body class="harmony"> <header> <div class="title">SPA Example</div> </header> <div id="profiles"></div> <script id="profileTemplate" type="text/template"> <div class="profile"> <div class="info"> <div class="intuitId"> <%= intuitId %> </div> <div class="email"> <%= email %> </div> <div class="type"> <%= type %> </div> </div> </div> </script> </body> </html> This gives me an error and the render function isn't invoking properly and the render function is called even before the REST API returns the JSON response. Could anyone please help me to figure out where I went wrong. Any help is highly appreciated Thank you

    Read the article

  • Backbone.js Model validation fails to prevent Model from saving

    - by Benjen
    I have defined a validate method for a Backbone.js Model. The problem is that even if validation fails (i.e. the Model.validate method returns a value) the post/put request is still sent to the server. This contradicts what is explained in the Backbone.js documentation. I cannot understand what I am doing wrong. The following is the Model definition: /** * Model - Contact */ var Contact = Backbone.Model.extend({ urlRoot: '/contacts.json', idAttribute: '_id', defaults: function() { return { surname: '', given_name: '', org: '', phone: new Array(), email: new Array(), address: new Array({ street: '', district: '', city: '', country: '', postcode: '' }) }; } validate: function(attributes) { if (typeof attributes.validationDisabled === 'undefined') { var errors = new Array(); // Validate surname. if (_.isEmpty(attributes.surname) === true) { errors.push({ type: 'form', attribute: 'surname', message: 'Please enter a surname.' }); } // Validate emails. if (_.isEmpty(attributes.email) === false) { var emailRegex = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,6}$/i; // Stores indexes of email values which fail validation. var emailIndex = new Array(); _.each(attributes.email, function(email, index) { if (emailRegex.test(email.value) === false) { emailIndex.push(index); } }); // Create error message. if (emailIndex.length > 0) { errors.push({ type: 'form', attribute: 'email', index: emailIndex, message: 'Please enter valid email address.' }); } } if (errors.length > 0) { console.log('Form validation failed.'); return errors; } } } }); Here is the View which calls the Model.save() method (see: method saveContact() below). Note that other methods belonging to this View have not been included below for reasons of brevity. /** * View - Edit contact form */ var EditContactFormView = Backbone.View.extend({ initialize: function() { _.bindAll(this, 'createDialog', 'formError', 'render', 'saveContact', 'updateContact'); // Add templates. this._editFormTemplate = _.template($('#edit-contact-form-tpl').html()); this._emailFieldTemplate = _.template($('#email-field-tpl').html()); this._phoneFieldTemplate = _.template($('#phone-field-tpl').html()); // Get URI of current page. this.currentPageUri = this.options.currentPageUri; // Create array to hold references to all subviews. this.subViews = new Array(); // Set options for new or existing contact. this.model = this.options.model; // Bind with Model validation error event. this.model.on('error', this.formError); this.render(); } /** * Deals with form validation errors */ formError: function(model, error) { console.log(error); }, saveContact: function(event) { var self = this; // Prevent submit event trigger from firing. event.preventDefault(); // Trigger form submit event. eventAggregator.trigger('submit:contactEditForm'); // Update model with form values. this.updateContact(); // Enable validation for Model. Done by unsetting validationDisabled // attribute. This setting was formerly applied to prevent validation // on Model.fetch() events. See this.model.validate(). this.model.unset('validationDisabled'); // Save contact to database. this.model.save(this.model.attributes, { success: function(model, response) { if (typeof response.flash !== 'undefined') { Messenger.trigger('new:messages', response.flash); } }, error: function(model, response) { console.log(response); throw error = new Error('Error occured while trying to save contact.'); } }, { wait: true }); }, /** * Extract form values and update Contact. */ updateContact: function() { this.model.set('surname', this.$('#surname-field').val()); this.model.set('given_name', this.$('#given-name-field').val()); this.model.set('org', this.$('#org-field').val()); // Extract address form values. var address = new Array({ street: this.$('input[name="street"]').val(), district: this.$('input[name="district"]').val(), city: this.$('input[name="city"]').val(), country: this.$('input[name="country"]').val(), postcode: this.$('input[name="postcode"]').val() }); this.model.set('address', address); } });

    Read the article

  • backbone.js removing template from DOM upon success

    - by timpone
    I'm writing a simple message board app to learn backbone. It's going ok (a lot of the use of this isn't making sense) but am a little stuck in terms of how I would remove a form / html from the dom. I have included most of the code but you can see about 4 lines up from the bottom, the part that isn't working. How would I remove this from the DOM? thx in advance var MbForm=Backbone.View.extend({ events: { 'click button.add-new-post': 'savePost' }, el: $('#detail'), template:_.template($('#post-add-edit-tmpl').html()), render: function(){ var compiled_template = this.template(); this.$el.html(compiled_template); return this; }, savePost: function(e){ //var self=this; //console.log("I want you to say Hello!"); data={ header: $('#post_header').val(), detail: $('#post_detail').val(), forum_id: $('#forum_id').val(), post_id: $('#post_id').val(), parent_id: $('#parent_id').val() }; this.model.save(data, { success: function(){ alert('this saved'); //$(this.el).html('this is what i want'); this.$el.remove();// <- this is the part that isn't working /* none of these worked - error Uncaught TypeError: Cannot call method 'unbind' of undefined this.$el.unbind(); this.$el.empty(); this.el.unbind(); this.el.empty(); */ //this.unbind(); //self.append('this is appended'); } });

    Read the article

  • Backbone.js, Rails and code duplication

    - by Matteo Pagliazzi
    I'm building a web app and I need a JS framework like Backbone.js to work with my backend rovided by Rails that mostly return JSON objects after DB queries. Searching on the web I've discovered Backbone which seems to be complete, quite populare and actively developed but I've noticed that a lot of things done by Backbone are simply a duplicte of the works done by Rails: for example validation and models. My idea of "perfect" (for my actual needs) JS mvc (it can't be called mvc but i don't have any other names) is something really simple that has a function for each action in my Rails controller that are triggered by a specific event (user/hash changes, click on a button...) and send requests to the server that respond with a JSON object then I'll load a template or execute some JS code. Do you have any concern/suggestion about my idea? Do you know some "micro" js framework like what i have described? If you have worked with backone.js + rails what can you suggest me?

    Read the article

  • Backbone: Easiest way to maintain reference to 'this' for a Model inside callbacks

    - by Garrett
    var JavascriptHelper = Backbone.Model.extend("JavascriptHelper", {}, // never initialized as an instance { myFn: function() { $('.selector').live('click', function() { this.anotherFn(); // FAIL! }); }, anotherFn: function() { alert('This is never called from myFn()'); } } ); The usual _.bindAll(this, ...) approach won't work here because I am never initializing this model as an instance. Any ideas? Thanks.

    Read the article

  • Backbone: rendering syntax

    - by ksol
    We're using Backbone.js in one of my team's projects, and this is the first time I use it. I've seen many times this kind of code (it's coffeescript, but clear enough I think. @ means this.) clients_view = new Homespa.Views.Orders.Clients.SectionView(collection: @options.clients) @$("#clients-section").html(clients_view.render().el) clients_search_view = new Homespa.Views.Orders.Clients.SearchView @$("#clients_search_modal").html(clients_search_view.render().el) Isn't there a better way to do this? I would expect to just call render on my view, and then everything's good, I shouldn't have to get the html and append/replace it by hand. Thanks for you time !

    Read the article

  • Drupal views pane content not visible

    - by jwandborg
    I have a pane on my front page with one content pane and two views panes. I can't see the content of the third view ($pane->pid = "new-3" / comment: # Senaste bilder). Here's my panel <?php $page = new stdClass; $page->disabled = FALSE; /* Edit this to true to make a default page disabled initially */ $page->api_version = 1; $page->name = 'frontpage'; $page->task = 'page'; $page->admin_title = 'Startsida'; $page->admin_description = ''; $page->path = 'hem'; $page->access = array(); $page->menu = array(); $page->arguments = array(); $page->conf = array(); $page->default_handlers = array(); $handler = new stdClass; $handler->disabled = FALSE; /* Edit this to true to make a default handler disabled initially */ $handler->api_version = 1; $handler->name = 'page_frontpage_panel_context'; $handler->task = 'page'; $handler->subtask = 'frontpage'; $handler->handler = 'panel_context'; $handler->weight = 0; $handler->conf = array( 'title' => 'Panel', 'no_blocks' => FALSE, 'css_id' => '', 'css' => '', 'contexts' => array(), 'relationships' => array(), ); $display = new panels_display; $display->layout = 'onecol'; $display->layout_settings = array(); $display->panel_settings = array(); $display->cache = array(); $display->title = ''; $display->content = array(); $display->panels = array(); # Bild $pane = new stdClass; $pane->pid = 'new-1'; $pane->panel = 'middle'; $pane->type = 'custom'; $pane->subtype = 'custom'; $pane->shown = TRUE; $pane->access = array(); $pane->configuration = array( 'admin_title' => '', 'title' => '', 'body' => '<img src="/sites/all/themes/zen/ils-2010/img/graphics-start-text-v3.png" alt="Hej! Vi vet att du och dina klasskompisar har mycket att tänka på under er sista termin i gymnasiet. Därför har vi samlat några saker som vi tror kommer göra er studenttid lite roligare och lite enklare. Välkommen!" />', 'format' => '2', 'substitute' => TRUE, ); $pane->cache = array(); $pane->style = array(); $pane->css = array(); $pane->extras = array(); $pane->position = 0; $display->content['new-1'] = $pane; $display->panels['middle'][0] = 'new-1'; # Topplista $pane = new stdClass; $pane->pid = 'new-2'; $pane->panel = 'middle'; $pane->type = 'views_panes'; $pane->subtype = 'topplista_terms-panel_pane_1'; $pane->shown = TRUE; $pane->access = array(); $pane->configuration = array( 'link_to_view' => 1, 'more_link' => 0, 'use_pager' => 0, 'pager_id' => '', 'items_per_page' => '10', 'offset' => '0', 'path' => 'flaktavling/topplista/klasser', 'override_title' => 0, 'override_title_text' => '', ); $pane->cache = array(); $pane->style = array(); $pane->css = array(); $pane->extras = array(); $pane->position = 1; $display->content['new-2'] = $pane; $display->panels['middle'][1] = 'new-2'; # Senaste bilder $pane = new stdClass; $pane->pid = 'new-3'; $pane->panel = 'middle'; $pane->type = 'views_panes'; $pane->subtype = 'senaste_bilderna-panel_pane_1'; $pane->shown = TRUE; $pane->access = array(); $pane->configuration = array( 'link_to_view' => 0, 'more_link' => 0, 'use_pager' => 0, 'pager_id' => '', 'items_per_page' => '2', 'offset' => '0', 'path' => 'galleri/senaste-bilder', 'override_title' => 0, 'override_title_text' => '', ); $pane->cache = array(); $pane->style = array(); $pane->css = array( 'css_id' => 'pane-senaste-bilderna', 'css_class' => '', ); $pane->extras = array(); $pane->position = 2; $display->content['new-3'] = $pane; $display->panels['middle'][2] = 'new-3'; $display->hide_title = PANELS_TITLE_FIXED; $display->title_pane = 'new-1'; $handler->conf['display'] = $display; $page->default_handlers[$handler->name] = $handler; Here´s the view senaste_bilderna <?php $view = new view; $view->name = 'senaste_bilderna'; $view->description = ''; $view->tag = ''; $view->view_php = ''; $view->base_table = 'node'; $view->is_cacheable = FALSE; $view->api_version = 2; $view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */ $handler = $view->new_display('default', 'Förvalt', 'default'); $handler->override_option('fields', array( 'field_picture_fid' => array( 'id' => 'field_picture_fid', 'table' => 'node_data_field_picture', 'field' => 'field_picture_fid', ), )); $handler->override_option('sorts', array( 'created' => array( 'order' => 'DESC', 'granularity' => 'second', 'id' => 'created', 'table' => 'node', 'field' => 'created', 'relationship' => 'none', ), )); $handler->override_option('filters', array( 'type' => array( 'operator' => 'in', 'value' => array( 'ils_picture' => 'ils_picture', ), 'group' => '0', 'exposed' => FALSE, 'expose' => array( 'operator' => FALSE, 'label' => '', ), 'id' => 'type', 'table' => 'node', 'field' => 'type', 'override' => array( 'button' => 'Åsidosätt', ), 'relationship' => 'none', ), )); $handler->override_option('access', array( 'type' => 'none', )); $handler->override_option('cache', array( 'type' => 'none', )); $handler->override_option('title', 'Senaste bilderna från galleriet'); $handler->override_option('items_per_page', 2); $handler->override_option('row_options', array( 'inline' => array( 'field_picture_fid' => 'field_picture_fid', ), 'separator' => '', 'hide_empty' => 0, )); $handler = $view->new_display('panel_pane', 'Content pane', 'panel_pane_1'); $handler->override_option('pane_title', ''); $handler->override_option('pane_description', ''); $handler->override_option('pane_category', array( 'name' => 'View panes', 'weight' => 0, )); $handler->override_option('allow', array( 'use_pager' => FALSE, 'items_per_page' => FALSE, 'offset' => FALSE, 'link_to_view' => FALSE, 'more_link' => FALSE, 'path_override' => FALSE, 'title_override' => FALSE, 'exposed_form' => FALSE, )); $handler->override_option('argument_input', array()); $handler->override_option('link_to_view', 0); $handler->override_option('inherit_panels_path', 0); $handler = $view->new_display('page', 'Sida', 'page_1'); $handler->override_option('path', 'galleri/senaste-bilderna'); $handler->override_option('menu', array( 'type' => 'none', 'title' => '', 'description' => '', 'weight' => 0, 'name' => 'navigation', )); $handler->override_option('tab_options', array( 'type' => 'none', 'title' => '', 'description' => '', 'weight' => 0, )); I have edited one views template, here's the code in the file views-view-fields--senaste-bilderna.tpl.php <?php // $Id: views-view-fields.tpl.php,v 1.6 2008/09/24 22:48:21 merlinofchaos Exp $ /** * @file views-view-fields.tpl.php * Default simple view template to all the fields as a row. * * - $view: The view in use. * - $fields: an array of $field objects. Each one contains: * - $field->content: The output of the field. * - $field->raw: The raw data for the field, if it exists. This is NOT output safe. * - $field->class: The safe class id to use. * - $field->handler: The Views field handler object controlling this field. Do not use * var_export to dump this object, as it can't handle the recursion. * - $field->inline: Whether or not the field should be inline. * - $field->inline_html: either div or span based on the above flag. * - $field->separator: an optional separator that may appear before a field. * - $row: The raw result object from the query, with all data it fetched. * * @ingroup views_templates */ ?> <?php foreach ($fields as $id => $field): ?> <?php $result = db_query('SELECT * FROM {files} WHERE fid = ' . $row->node_data_field_picture_field_picture_fid ); ?> <?php $data = db_fetch_object( $result ); ?> <div id="senaste-bilderna-first"><img src="<?= imagecache_create_url('senaste_bilderna_thumbnail', $data->filepath) ?>" alt="" /></div> <?php /* if (!empty($field->separator)): <?php print $field->separator; <?php endif; <<?php print $field->inline_html; class="views-field-<?php print $field->class; "> <?php if ($field->label): <label class="views-label-<?php print $field->class; "> <?php print $field->label; : </label> <?php endif; <?php // $field->element_type is either SPAN or DIV depending upon whether or not // the field is a 'block' element type or 'inline' element type. <<?php print $field->element_type; class="field-content"><?php print $field->content; </<?php print $field->element_type; > </<?php print $field->inline_html;> <?php*/ endforeach; ?> This is the result <div class="panel-separator"> </div> <div class="panel-pane pane-views-panes pane-senaste-bilderna-panel-pane-1" id="pane-senaste-bilderna"> <h2 class="pane-title">Senaste bilderna från galleriet </h2> <div class="pane-content"> <div class="view view-senaste-bilderna view-id-senaste_bilderna view-display-id-panel_pane_1 view-dom-id-2"> <div class="view-content"> <div class="views-row views-row-1 views-row-odd views-row-first"> </div> <div class="views-row views-row-2 views-row-even views-row-last"> </div> </div> </div> </div> </div> My Drupal version is 6.16

    Read the article

  • Multi-tenant ASP.NET MVC - Views

    - by zowens
    Part I – Introduction Part II – Foundation Part III – Controllers   So far we have covered the basic premise of tenants and how they will be delegated. Now comes a big issue with multi-tenancy, the views. In some applications, you will not have to override views for each tenant. However, one of my requirements is to add extra views (and controller actions) along with overriding views from the core structure. This presents a bit of a problem in locating views for each tenant request. I have chosen quite an opinionated approach at the present but will coming back to the “views” issue in a later post. What’s the deal? The path I’ve chosen is to use precompiled Spark views. I really love Spark View Engine and was planning on using it in my project anyways. However, I ran across a really neat aspect of the source when I was having a look under the hood. There’s an easy way to hook in embedded views from your project. There are solutions that provide this, but they implement a special Virtual Path Provider. While I think this is a great solution, I would rather just have Spark take care of the view resolution. The magic actually happens during the compilation of the views into a bin-deployable DLL. After the views are compiled, the are simply pulled out of the views DLL. Each tenant has its own views DLL that just has “.Views” appended after the assembly name as a convention. The list of reasons for this approach are quite long. The primary motivation is performance. I’ve had quite a few performance issues in the past and I would like to increase my application’s performance in any way that I can. My customized build of Spark removes insignificant whitespace from the HTML output so I can some some bandwidth and load time without having to deal with whitespace removal at runtime.   How to setup Tenants for the Host In the source, I’ve provided a single tenant as a sample (Sample1). This will serve as a template for subsequent tenants in your application. The first step is to add a “PostBuildStep” installer into the project. I’ve defined one in the source that will eventually change as we focus more on the construction of dependency containers. The next step is to tell the project to run the installer and copy the DLL output to a folder in the host that will pick up as a tenant. Here’s the code that will achieve it (this belongs in Post-build event command line field in the Build Events tab of settings) %systemroot%\Microsoft.NET\Framework\v4.0.30319\installutil "$(TargetPath)" copy /Y "$(TargetDir)$(TargetName)*.dll" "$(SolutionDir)Web\Tenants\" copy /Y "$(TargetDir)$(TargetName)*.pdb" "$(SolutionDir)Web\Tenants\" The DLLs with a name starting with the target assembly name will be copied to the “Tenants” folder in the web project. This means something like MultiTenancy.Tenants.Sample1.dll and MultiTenancy.Tenants.Sample1.Views.dll will both be copied along with the debug symbols. This is probably the simplest way to go about this, but it is a tad inflexible. For example, what if you have dependencies? The preferred method would probably be to use IL Merge to merge your dependencies with your target DLL. This would have to be added in the build events. Another way to achieve that would be to simply bypass Visual Studio events and use MSBuild.   I also got a question about how I was setting up the controller factory. Here’s the basics on how I’m setting up tenants inside the host (Global.asax) protected void Application_Start() { RegisterRoutes(RouteTable.Routes); // create a container just to pull in tenants var topContainer = new Container(); topContainer.Configure(config => { config.Scan(scanner => { scanner.AssembliesFromPath(Path.Combine(Server.MapPath("~/"), "Tenants")); scanner.AddAllTypesOf<IApplicationTenant>(); }); }); // create selectors var tenantSelector = new DefaultTenantSelector(topContainer.GetAllInstances<IApplicationTenant>()); var containerSelector = new TenantContainerResolver(tenantSelector); // clear view engines, we don't want anything other than spark ViewEngines.Engines.Clear(); // set view engine ViewEngines.Engines.Add(new TenantViewEngine(tenantSelector)); // set controller factory ControllerBuilder.Current.SetControllerFactory(new ContainerControllerFactory(containerSelector)); } The code to setup the tenants isn’t actually that hard. I’m utilizing assembly scanners in StructureMap as a simple way to pull in DLLs that are not in the AppDomain. Remember that there is a dependency on the host in the tenants and a tenant cannot simply be referenced by a host because of circular dependencies.   Tenant View Engine TenantViewEngine is a simple delegator to the tenant’s specified view engine. You might have noticed that a tenant has to define a view engine. public interface IApplicationTenant { .... IViewEngine ViewEngine { get; } } The trick comes in specifying the view engine on the tenant side. Here’s some of the code that will pull views from the DLL. protected virtual IViewEngine DetermineViewEngine() { var factory = new SparkViewFactory(); var file = GetType().Assembly.CodeBase.Without("file:///").Replace(".dll", ".Views.dll").Replace('/', '\\'); var assembly = Assembly.LoadFile(file); factory.Engine.LoadBatchCompilation(assembly); return factory; } This code resides in an abstract Tenant where the fields are setup in the constructor. This method (inside the abstract class) will load the Views assembly and load the compilation into Spark’s “Descriptors” that will be used to determine views. There is some trickery on determining the file location… but it works just fine.   Up Next There’s just a few big things left such as StructureMap configuring controllers with a convention instead of specifying types directly with container construction and content resolution. I will also try to find a way to use the Web Forms View Engine in a multi-tenant way we achieved with the Spark View Engine without using a virtual path provider. I will probably not use the Web Forms View Engine personally, but I’m sure some people would prefer using WebForms because of the maturity of the engine. As always, I love to take questions by email or on twitter. Suggestions are always welcome as well! (Oh, and here’s another link to the source code).

    Read the article

  • Backbone.js not registering Model.hasChanged event

    - by Brian M. Hunt
    Hello, I'm trying to get a View in Backbone.js to save when there's a 'change' event if (and only if) the data has changed. Long story short, I've a 'change' event set on the View that calls this: function changed_event() { log.debug("Before: " + this.model.get('name')) // not 'contrived!' this.model.set({'name': 'contrived!'}); log.debug("After: " + this.model.get('name')) // 'contrived!' if (this.model.hasChanged()) { alert("This is never called."); } } I'd like to know why the model.hasChanged() is false when clearly the model has been changed. I'm not sure what other information is necessary, but if there is more information that may be helpful please comment and I'll elaborate. Thank you for reading.

    Read the article

  • only update certain model attributes using Backbone.js

    - by Drew Dara-Abrams
    With Backbone, I'm trying to update and save to the server just one attribute: currentUser.save({hide_explorer_tutorial: 'true'}); but I don't want to send all the other attributes. Some of them are actually the output of methods on the server-side and so they are not actually true attributes with setter functions. Currently I'm using unset(attribute_name) to remove all the attributes that I don't want to update on the server. Problem is those attributes are then no longer available for local use. Suggestions on how to only save certain attributes to the server?

    Read the article

  • Sync issue in collection fetch backbone

    - by Stefano Maglione
    i'm fetching a collection but i've problem because into the collection the function parse use an another ajax call.So if i try to console.log the response of fetch after the fetch linecode but it is ever undefined. Function call fetch: friends: function(){ var amici=new Amicizie(); var amicilist=amici.fetch(); console.log(amicilist);<---undefined,because executed before fetch collection called: var obj={}; var Amicizie = Backbone.Collection.extend({ url:'https://api.parse.com/1/classes/User/', parse: function(data) { var cur_user=Parse.User.current().id; $.ajax({ type: 'GET', headers: {'X-Parse-Application-Id':'qS0KL***EM1tyhM9EEPiTS3VMk','X-Parse-REST-API- Key':'nh3eoUo9G***JIfIt1Gm'}, url: "https://api.parse.com/1/classes/_User/?where=....", success: function(object) { console.log(object ); obj=object; console.log(obj ); }, error: function(data) { console.log("ko" ); } }); return obj.results; } }); return Amicizie; });

    Read the article

  • rest and client rights integration, and backbone.js

    - by Francois
    I started to be more and more interested in the REST architecture style and client side development and I was thinking of using backbone.js on the client and a REST API (using ASP.NET Web API) for a little meeting management application. One of my requirements is that users with admin rights can edit meetings and other user can only see them. I was then wondering how to integrate the current user rights in the response for a given resource? My problem is beyond knowing if a user is authenticated or not, I want to know if I need to render the little 'edit' button next to the meeting (let's say I'm listing the current meetings in a grid) or not. Let's say I'm GETing /api/meetings and this is returning a list of meetings with their respective individual URI. How can I add if the user is able to edit this resource or not? This is an interesting passage from one of Roy's blog posts: A REST API should be entered with no prior knowledge beyond the initial URI (bookmark) and set of standardized media types that are appropriate for the intended audience (i.e., expected to be understood by any client that might use the API). From that point on, all application state transitions must be driven by client selection of server-provided choices that are present in the received representations or implied by the user’s manipulation of those representations It states that all transitions must be driven by the choices that are present in the representation. Does that mean that I can add an 'editURI' and a 'deleteURI' to each of the meeting i'm returning? if this information is there I can render the 'edit' button and if it's not there I just don't? What's the best practices on how to integrate the user's rights in the entity's representation? Or is this a super bad idea and another round trip is needed to fetch that information?

    Read the article

  • Backbone.js routes not firing

    - by drale2k
    I have a Base Router where i define some functions that need to be run everywhere. Every Router extends this Router. Now my problem is, that none of my routes defined in this Base router, actually fire. Every other route in other Routers work fine. I have created a test route called 'a' which calls method 'b', which should fire an alert but nothing happens. Here is the code: (This is Coffeescript, don't pay attention to the indentation, it's fine in my file) class Etaxi.Routers.Base extends Backbone.Router routes: 'register' : 'registerDevice' 'a' : 'b' b: -> alert "a" initialize: -> @registerDevice() unless localStorage.device_id? @getGeolocation() registerDevice: -> @collection = new Etaxi.Collections.Devices() @collection.fetch() view = new Etaxi.Views.RegisterDevice(collection: @collection) $('#wrapper').append(view.render().el) getGeolocation: -> navigator.geolocation.getCurrentPosition (position) -> lat = position.coords.latitude lng = position.coords.longitude #$('#apphead').tap -> # alert 'Position: ' + lat + " ," + lng So when i visit '/register' or '/a' it should fire the appropriate method but it does not. I wonder if it has something to do with the fact that other Router extend from this Router? Would be wired but it is the only thing i can think of because every other Router works fine.

    Read the article

  • Problems with Backbone.Model callback and THIS

    - by Rev. Samuel
    I'm building a simple weather widget. The current weather conditions are read out of the National Weather Service xml file and then I want to parse and store the relevant data in the model but the callback for the $.ajax won't connect (the way I'm doing it). var Weather = Backbone.Model.extend({ initialize: function(){ _.bindAll( this, 'update', 'startLoop', 'stopLoop' ); this.startLoop(); }, startLoop: function(){ this.update(); this.interval = window.setInterval( _.bind( this.update, this ), 1000 * 60 * 60 ); }, stopLoop: function(){ this.interval = window.clearInterval( this.interval ); }, store: function( data ){ this.set({ icon : $( data ).find( 'icon_url_name' ).text() }); }, update: function(){ $.ajax({ type: 'GET', url: 'xml/KROC.xml', datatype: 'xml' }) .done( function( data ) { var that = this; that.store( $( data ).find( 'current_observation' )[ 0 ] ); }); } }); var weather = new Weather(); The data is read correctly but I can't get the done function of the call back to call the store function. (I would be happy if the "done" would just parse and then do "this.set". Thanks in advance for your help.

    Read the article

  • Simple Form validation failing Backbone

    - by Corey Buchillon
    Im not exactly adept at coding so Im probably missing something, but my view here is failing to refuse submission when one or both of the fields are empty. I have a feeling something isnt connected right to my template for the row and the view of the form Form = Backbone.View.extend({ //form vie el: '.item-form', initialize: function(){ }, events: { 'click #additem': 'addModel' }, addModel: function(itemName, price){ // simple validation before adding to collection if (itemName !="" && price !="" ){ var item = new Item({ itemName: this.$("#item").val(), price: this.$("#price").val()}); items.add(item); $("#message").html("Please wait; the task is being added."); item.save(null, {success: function (item, response,options) { item.id= item.attributes._id.$id; item.attributes.id = item.attributes._id.$id; new ItemsView({collection: items}); $("#message").html(""); } }); this.$("#item").val(''); this.$("#price").val(''); } else { alert('Please fill in both fields'); } } }); and HTML <table class="itemTable"> <thead> <tr> <th>Item</th> <th>Price</th> <th></th> </tr> </thead> <tbody class="tableBody"> <script type="text/template" id="table-row"> <td><%= itemName %></td> <td><%= price %></td> <td><button class="complete">Complete</button> <button class="remove">Remove</button></td> </script> </tbody> </table> <form class="item-form"> <input type="text" name="item" id="item" placeholder="Item"/> <!-- goes to itemName in the template for the body --> <input type="text" name="price" id="price" placeholder="Price" /><!--goes to price in the template for the body --> <button type="button" id="additem">Add</button> </form> <div id="message"></div>

    Read the article

  • backbone.js - Having multiple instances of the same view

    - by TrueWheel
    I am having problems having multiple instances in of the same view in different div elements. When I try to initialize them only the second of the two elements appear no matter what order I put them in. Here is the code for my view. var BodyShapeView = Backbone.View.extend({ thingiview: null, scene: null, renderer: null, model: null, mouseX: 0, mouseY: 0, events:{ 'click button#front' : 'front', 'click button#diag' : 'diag', 'click button#in' : 'zoomIn', 'click button#out' : 'zoomOut', 'click button#on' : 'rotateOn', 'click button#off' : 'rotateOff', 'click button#wireframeOn' : 'wireOn', 'click button#wireframeOff' : 'wireOff', 'click button#distance' : 'dijkstra' }, initialize: function(name){ _.bindAll(this, 'render', 'animate'); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 15, 400 / 700, 1, 4000 ); camera.position.z = 3; scene.add( camera ); camera.position.y = -5; var ambient = new THREE.AmbientLight( 0x202020 ); scene.add( ambient ); var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.75 ); directionalLight.position.set( 0, 0, 1 ); scene.add( directionalLight ); var pointLight = new THREE.PointLight( 0xffffff, 5, 29 ); pointLight.position.set( 0, -25, 10 ); scene.add( pointLight ); var loader = new THREE.OBJLoader(); loader.load( "img/originalMeanModel.obj", function ( object ) { object.children[0].geometry.computeFaceNormals(); var geometry = object.children[0].geometry; console.log(geometry); THREE.GeometryUtils.center(geometry); geometry.dynamic = true; var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors }); mesh = new THREE.Mesh(geometry, material); model = mesh; // model = object; scene.add( model ); } ); // RENDERER renderer = new THREE.WebGLRenderer(); renderer.setSize( 400, 700 ); $(this.el).find('.obj').append( renderer.domElement ); this.animate(); }, Here is how I create the instances var morphableBody = new BodyShapeView({ el: $("#morphable-body") }); var bodyShapeView = new BodyShapeView({ el: $("#mean-body") }); Any help would be really appreciated. Thanks in advance.

    Read the article

  • Localization with separate Language folders within Views

    - by Adrian
    I'm trying to have specific folders for each language in Views. (I know this isn't the best way of doing it but it has to be this way for now) e.g. /Views/EN/User/Edit.aspx /Views/US/User/Edit.aspx These would both use the same controller and model but have different Views for each language. In my Global.asax.cs I have routes.MapRoute( "Default", // Route name "{language}/{controller}/{action}/{id}", // URL with parameters new { language = "en", controller = "Logon", action = "Index", id = UrlParameter.Optional }, // Parameter defaults new { language = @"en|us" } // validation ); This works ok but always points to the same View. If I put the path to the Lanagugage folder it works return View("~/Views/EN/User/Edit.aspx"); but clearly this isn't a very nice way to do it. Is there anyway to get MVC to look in the correct language folder? Thanks and again I know this isn't the best way of doing Localization but I can't use resource files.

    Read the article

  • In plain English, what are Django generic views?

    - by allyourcode
    The first two paragraphs of this page explain that generic views are supposed to make my life easier, less monotonous, and make me more attractive to women (I made up that last one): http://docs.djangoproject.com/en/dev/topics/generic-views/#topics-generic-views I'm all for improving my life, but what do generic views actually do? It seems like lots of buzzwords are being thrown around, which confuse more than they explain. Are generic views similar to scaffolding in Ruby on Rails? The last bullet point in the intro seems to indicate this. Is that an accurate statement?

    Read the article

  • Django Class Views and Reverse Urls

    - by kalhartt
    I have a good many class based views that use reverse(name, args) to find urls and pass this to templates. However, the problem is class based views must be instantiated before urlpatterns can be defined. This means the class is instantiated while urlpatterns is empty leading to reverse throwing errors. I've been working around this by passing lambda: reverse(name, args) to my templates but surely there is a better solution. As a simple example the following fails with exception: ImproperlyConfigured at xxxx The included urlconf mysite.urls doesn't have any patterns in it mysite.urls from mysite.views import MyClassView urlpatterns = patterns('', url(r'^$' MyClassView.as_view(), name='home') ) views.py class MyClassView(View): def get(self, request): home_url = reverse('home') return render_to_response('home.html', {'home_url':home_url}, context_instance=RequestContext(request)) home.html <p><a href={{ home_url }}>Home</a></p> I'm currently working around the problem by forcing reverse to run on template rendering by changing views.py to class MyClassView(View): def get(self, request): home_url = lambda: reverse('home') return render_to_response('home.html', {'home_url':home_url}, context_instance=RequestContext(request)) and it works, but this is really ugly and surely there is a better way. So is there a way to use reverse in class based views but avoid the cyclic dependency of urlpatterns requiring view requiring reverse requiring urlpatterns...

    Read the article

  • Django: Breaking up views

    - by Brant
    This is really just a "best practices" question... I find that When developing an app, I often end up with a lot of views. Is it common practice to break these views up into several view files? In other words... instead of just having views.py, is it common to have views_1.py, views_2.py, views_3.py (but named more appropriately, perhaps by category)?

    Read the article

  • multiple partial views mvc 2

    - by nik1
    Hello World! Hi guys, I have a master page with two partial viewson it both of which submit to the AccountController. When I click Submit on either of the partial views the following happens: If I declare the partial views like Html.BeginForm("PartialAction1","Account") it redirects to that partial view on clicking submit instead bringing back the default HomeContoller Index view with validation errors. If I declare the partial view forms as Html.BeginForm() then it returns to the default index view of the home controller. But it actually fires both partial view actions inside the AccountController and thus returns validation errors for both partial views simultaneously. What I want is version 2 above with only one action firing instead of two. Am I missing, hopefully, something very simple? I hoping someone can help me or point me in the right direction. Here's the code from my master page for the partial views Html.Action("Login1","Account") Html.Action("Login2", "Account") Many Thanks!

    Read the article

  • Switching between landscape views

    - by Isacco
    What is the best way to switch between views that are both in Landscape mode? I've tried with a simple "Push and Pop" methods that work fine when I try them with Portrait views but when I do it with Landscape for some reason it does the switching like the method was supposed to work just for Portrait views and a the end of the switch it autorotates back to Landscape.... if anyone can help that would be greatly appreciated. Thanks in advance.

    Read the article

  • Rendering Flickr Cats Via Backbone.js

    - by Geertjan
    Create a JavaScript file and refer to it inside an HTML file. Then put this into the JavaScript file: (function($) {     var CatCollection = Backbone.Collection.extend({         url: 'http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',         parse: function(response) {             return response.items;         }     });     var CatView = Backbone.View.extend({         el: $('body'),         initialize: function() {             _.bindAll(this, 'render');             carCollectionInstance.fetch({                 success: function(response, xhr) {                     catView.render();                 }             });         },         render: function() {             $(this.el).append("<ul></ul>");             for (var i = 0; i < carCollectionInstance.length; i++) {                 $('ul', this.el).append("<li>" + i + carCollectionInstance.models[i].get("description") + "</li>");             }         }     });     var carCollectionInstance = new CatCollection();     var catView = new CatView(); })(jQuery); Apologies for any errors or misused idioms. It's my second day with Backbone.js, in fact, my second day with JavaScript. I haven't seen anywhere online so far where an example such as the above is found, though plenty that do kind of or pieces of the above, or explain in text, without an actual full example. The next step, and the only reason for the above experiment, is to create some JPA entities and expose them via RESTful webservices created on EJB methods, for consumption into an HTML5 application via a Backbone.js script very similar to the above. 

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >