Sails .ejs file leveraging Backbone view

I am facing a challenge with accessing backbone views within the sails framework. After fetching data from the server, I am attempting to push it to the DOM. I have set up a model-controller for the tags where I store data from Mongo into the tags model and return the URL of the tags view to Backbone. My goal is to display this data in my DOM element. However, I am encountering an error stating that 'tagsCloud is not defined'. Below is the code snippet related to my DOM element:

          51| <div id="profiles" class = 'hashTagsCloud'>
          52| <script id="profileTemplate" type="text/template">
       >> 53| <%= tagsCloud.tags.join("&nbsp &nbsp &nbsp")%>
          54| </script>
          55| </div>


      tagsCloud is not defined

The 'tagsCloud' variable is part of the JSON file received from the server which contains the data. The Backbone code for the views is as follows:

  var ProfileView = Backbone.View.extend({

        el: "#profiles",
        template: _.template($('#profileTemplate').html()),
        render: function(eventName) {

        _.each(this.model.models, function(profile){
        var profileTemplate = this.template(profile.toJSON());
        //push data to obj for map script
        obj = profile.toJSON();
        // Add data to DOM element
        $(this.el).html(profileTemplate);
        }, this);

            return this;


        }


    });

This backbone logic works flawlessly in Apache, but encounters errors in Sails. How can I properly define a view for the 'tagsCloud' item in my index file within Sails? Here is a snippet of the JSON file being used:

  [
    {
     tstamp: 1366626103000,
     tagsCloud: {
     sort: "asc",
     tags: [
           "Lorem ipsum dolor sit amet consectetur"
           ]
     },
     id: "529da369380eb213e804a673"
    }
  ]

In addition, I have made some modifications to my homeController file in order to send the JSON data to the EJS file:

index: function (req,res)
{

    console.log(req.tags);  // tags is the name of the model-controller
    res.view({
        tags: req.tags
    });
},

'home': function (req,res)
{
    res.view();
}

Is there anything specific that needs to be adjusted in the Backbone view code to correctly update my index view?

Answer №1

After much trial and error, I have finally discovered a method to transfer retrieved data to the DOM using backbone. By modifying the template code within the backbone script, I am now able to directly send the data to the specified DOM element. Below is the updated code snippet:

     _.templateSettings = {
        interpolate : /\{\{(.+?)\}\}/g
    };

    var TagsView = Backbone.View.extend({

        el: "#profiles",
        template: _.template("<div><p>{{ tg.tagsCloud.tags }}</p></div>"),
        render: function(eventName) {

        _.each(this.model.models, function(tags){
        var tagsTemplate = this.template(tags.toJSON());
        //store data in obj for map script
        tg = tags.toJSON();

        // Insert data into designated DOM element
        $(this.el).html(tagsTemplate);
        }, this);
            return this;                   
        }       
        });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing a property that doesn't exist on a union type in Phaser using TypeScript

Currently, I've been immersed in the world of game development with Phaser 3 by following this insightful tutorial at . However, my focus has now shifted towards deploying these games online and adapting the code for use with TypeScript while gearing ...

How can you stop a document event listener from triggering?

Utilizing document.addEventListener('touchstart', this.onDocument); allows me to recognize when a user taps outside of an element. However, within my button click handler, the following code is present: toggleItemActive(e) { e.stopPropa ...

When attempting to print the elements of an array, an "undefined" value unexpectedly appeared

I recently wrote a Javascript code to display a list of items, but for some reason an unexpected undefined text is appearing before the ordered list. I am quite puzzled as to why this issue is occurring. I am wondering if there is a variable that has not ...

Tips on resizing the infoWindow in Google Map

I am having trouble with my infoWindow on Google Maps displaying the correct information. I need to adjust the size of the white div to match the grey box inside and also resize the arrow that connects the marker to the white div. Check out the image belo ...

Display elements that are unique to one array and not found in another array using React

I am working on a feature where users can select fruits from an array called fruits, and the selected fruits will be stored in another state array named user_fruits. Once a fruit is selected by a user, it should not be available for selection again. fruit ...

Mastering the art of utilizing $.get(url, function(data) in pure JavaScript

I am currently exploring how to achieve the equivalent of $.get(url,function(data) { code }; in pure JavaScript. function fetchImage(keyword){ if(!ACCESS_KEY){ alert("Please update your access key"); return; } var request = new XMLHttpRequ ...

Javascript-generated HTML elements are invisible

I am attempting to create a "circle of fifths" using html, css, and javascript. I am following this tutorial: https://blog.logrocket.com/interactive-svg-circle-of-fifths/ Although I am using the astro framework, I don't believe my issue is related to ...

What steps should I take to rename the image file?

Angularjs app.directive('fileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; ...

Determine whether an array is undefined in a React component

I am facing an issue in my React component where I have a code that renders the match name. However, sometimes the current match has an empty object and I don't know how to fix this problem. Here is the component code: import React from 'react&ap ...

What is the best way to restrict the number of characters in a textarea when new data is being added

I am currently going through the steps below: 1. Setting up a textarea with a maximum length of 50 characters. 2. Implementing a button that, when clicked, appends text to the textarea. Problem: The maxlength validation does not kick in if the button is ...

Transferring an IONIC project to a different computer

Let me outline the current situation I am facing - I primarily work as a firmware developer rather than a software developer. Recently, a team member who was responsible for developing the front end of an application in IONIC has left the company, leaving ...

What is the function of the `new` keyword in the context of module.exports

I have a test that is divided into 3 components: the main Page object, the HomePage in question, and the actual test itself. My goal is for HomePage to extend the Page object. However, I encountered an issue when using the following code in the Page class ...

Utilizing the Kraken.com API to create a message signature with AngularJS

I'm currently tackling Angular2 and for my first project, I want to tap into the Kraken.com API. (I know, I could have chosen an easier task :) The "Public" calls are working smoothly, but I've hit a snag with the "Private" methods. (Those requi ...

When I tried using the HTML 5 boilerplate extension in VS code, I received an error message indicating that it was not functioning properly

I've recently entered the realm of tech and decided to give VS Code a try. After downloading it, I installed several extensions, but unfortunately some of them aren't functioning properly. My primary issue is with the HTML5 boilerplate extension. ...

What is the best way to incorporate several functions within a resize function?

Is it possible to incorporate multiple functions within the windows.width resize function? I have been experimenting with some code, but I would like to restrict its usage to tablet and mobile devices only, excluding laptops and PCs. Any suggestions on h ...

next-redux-wrapper is being invoked repeatedly and experiencing multiple calls to HYDRATE

I'm embarking on a new Next.js project, transitioning from a standard React app to a Next.js application. Our plan is to utilize Redux Toolkit for global state management and incorporate server-side rendering. During this process, we discovered the ne ...

Adding more of a certain product in Laravel using the increment method from a modal window and ajax isn

I'm currently working on developing an inventory system using laravel. I have encountered a problem with updating the quantity of a product after it has been registered. I attempted to use the increment method in laravel, but unfortunately, it did not ...

Error: Failed to decode audio content due to a DOMException that was caught in the promise

Encountering an issue with the decodeAudioData method while utilizing the Web Audio API for playback in Chrome (works seamlessly in Firefox)- Sending the audio buffer, which has been recorded by the media recorder, back from the server. Server-side wss ...

How to call a function within a component from another component without encountering the "Cannot read property" error

Having trouble calling a function from one component in another by passing the reference of one to the other. I keep getting a "Cannot read property" error. Below is the code snippet Alert Component import { Component, OnInit, Output } from '@angula ...

Can Elements be classified as Method, Constant, or Component?

When it comes to grouping up reusable elements, I have a few options: constants, methods, or components: const someElementsConst = <div><p>Some Elements</p></div> const getSomeElements = () => <div><p>Some Elements&l ...