Meteor JS: How can I effectively manage the state of a unique template?

Question

Meteor JS: How can I effectively manage the state of a unique template?

I'm currently delving into the realms of Session and reactive data sources within the Meteor JS framework. They prove to be quite useful for managing global UI states. However, I've encountered a challenge in scoping them to a specific instance of a template.

My Objective

I have multiple contenteditable elements on a single webpage, each accompanied by an "Edit" button. On clicking the Edit button, the respective element should be focused on with "Save" and "Cancel" buttons displayed alongside.

Upon clicking "Cancel", any changes should be discarded, and the template instance should refresh with the original content.

The Code Implementation So Far

// Helper
Template.form.helpers({
  editState: function() {
    return Session.get("editState");
  }
});

// Rendered
Template.form.rendered = function(e){
  var $this = $(this.firstNode);
  var formField = this.find('.form-field');
  if (Session.get("editState")) formField.focus();
};

// Event map
Template.form.events({
  'click .edit-btn' : function (e, template) {
    e.preventDefault();
    Session.set("editState", "is-editing");
  },

  'click .cancel-btn' : function (e, template) {
    e.preventDefault();
    Session.set("editState", null);
  },
});

// Template
<template name="form">
  <div class="{{editState}}">
    <p class="form-field" contenteditable>
      {{descriptionText}}
    </p>
  </div>
  <a href="#" class="edit-btn">Edit</a>
  <a href="#" class="save-btn">Save</a>
  <a href="#" class="cancel-btn">Cancel</a>
</template>


// CSS
.edit-btn
.cancel-btn,
.save-btn {
  display: inline-block;
}

.cancel-btn,
.save-btn {
  display: none;
}

.is-editing .cancel-btn,
.is-editing .save-btn  {
  display: inline-block;
}

The Dilemma

When dealing with multiple instances of the Form template, the .form-field gets focused on every instance, rather than just the one being edited. How can I ensure that only the currently edited element is focused upon?

javascript meteor

Answer 1

Answer №1

To display a template with data, you simply pass an object to it when adding it to a page.

The data can be as simple as the key to use in the Session for editState.

For example, display the template with

Template.form({editStateKey:'editState-topForm'})

You can create a handlebars helper like this:

Handlebars.registerHelper('formWithOptions', 
  function(editStateKey){
    return Template.form({editStateKey:editStateKey})
});

Then include it in your template like so:

{{{formWithOptions 'editState-topForm'}}}

(remember the triple {, })

Next, update references from Session.x('editState') to Session.x(this.editStateKey) or

Session.x(this.data.editStateKey)

Template.form.helpers({
  editState: function() {
    return Session.get(this.editStateKey);
  }
});

// Rendered
Template.form.rendered = function(e){
  var $this = $(this.firstNode);
  var formField = this.find('.form-field');
  if (Session.get(this.data.editStateKey)) formField.focus();
};

// Event map
Template.form.events({
  'click .edit-btn' : function (e, template) {
    e.preventDefault();
    Session.set(this.editStateKey, "is-editing");
  },

  'click .cancel-btn' : function (e, template) {
    e.preventDefault();
    Session.set(this.editStateKey, null);
  },
});

Keep in mind: if you're using iron-router, it provides additional API's for passing data to templates.

Also, in meteor 1.0, there should be improved support for creating custom widgets, which will offer better control in situations like this.

Answer 2

To display a template with data, you simply pass an object to it when adding it to a page.

The data can be as simple as the key to use in the Session for editState.

For example, display the template with

Template.form({editStateKey:'editState-topForm'})

You can create a handlebars helper like this:

Handlebars.registerHelper('formWithOptions', 
  function(editStateKey){
    return Template.form({editStateKey:editStateKey})
});

Then include it in your template like so:

{{{formWithOptions 'editState-topForm'}}}

(remember the triple {, })

Next, update references from Session.x('editState') to Session.x(this.editStateKey) or

Session.x(this.data.editStateKey)

Template.form.helpers({
  editState: function() {
    return Session.get(this.editStateKey);
  }
});

// Rendered
Template.form.rendered = function(e){
  var $this = $(this.firstNode);
  var formField = this.find('.form-field');
  if (Session.get(this.data.editStateKey)) formField.focus();
};

// Event map
Template.form.events({
  'click .edit-btn' : function (e, template) {
    e.preventDefault();
    Session.set(this.editStateKey, "is-editing");
  },

  'click .cancel-btn' : function (e, template) {
    e.preventDefault();
    Session.set(this.editStateKey, null);
  },
});

Keep in mind: if you're using iron-router, it provides additional API's for passing data to templates.

Also, in meteor 1.0, there should be improved support for creating custom widgets, which will offer better control in situations like this.

Answer 3

Answer №2

It is my standard practice to steer clear of Session usage in most scenarios. The broad scope of Session tends to promote poor habits and a lack of proper organization when working on larger applications. Additionally, the global nature of Session can cause issues when dealing with multiple instances of a template. Due to these drawbacks, I believe there are more scalable alternatives available.

Potential Alternatives

1 Using addClass/removeClass

Rather than setting a state and reacting to it elsewhere, actions can be performed directly. Utilizing classes to display or hide elements as needed:

'click .js-edit-action': function(event, t) {
    var $this = $(event.currentTarget),
    container = $this.parents('.phenom-comment');

    // open and focus
    container.addClass('editing');
    container.find('textarea').focus();
},

'click .js-confirm-delete-action': function(event, t) {
      CardComments.remove(this._id);
},

2 Scoped ReactiveVar within the template instance

if (Meteor.isClient) {  
  Template.hello.created = function () {
  // counter starts at 0
  this.counter = new ReactiveVar(0);
};

Template.hello.helpers({
  counter: function () {
  return Template.instance().counter.get();
  }
});

Template.hello.events({
  'click button': function (event, template) {
    // increment the counter when button is clicked
    template.counter.set(template.counter.get() + 1);
  }
});
}

3 Utilizing Iron-Router's state variables

Obtain

Router.route('/posts/:_id', {name: 'post'});

PostController = RouteController.extend({
  action: function () {
    // set the reactive state variable "postId" with a value
    // of the id from our url
    this.state.set('postId', this.params._id);
    this.render();
  }
});

Define

Template.Post.helpers({
  postId: function () {
    var controller = Iron.controller();

    // reactively return the value of postId
    return controller.state.get('postId');
  }
});

https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#setting-reactive-state-variables

4 Modification of Collection data

An alternative method involves updating data in your collection directly. This approach can be suitable depending on the circumstances.

5 Adjusting the data context

In my opinion, Session is often not the best choice. Additionally, I prefer not to use the #3 method as I believe having less dependency on iron-router could be beneficial in case a switch to another router package like "Flow" is considered.

Answer 4

It is my standard practice to steer clear of Session usage in most scenarios. The broad scope of Session tends to promote poor habits and a lack of proper organization when working on larger applications. Additionally, the global nature of Session can cause issues when dealing with multiple instances of a template. Due to these drawbacks, I believe there are more scalable alternatives available.

Potential Alternatives

1 Using addClass/removeClass

Rather than setting a state and reacting to it elsewhere, actions can be performed directly. Utilizing classes to display or hide elements as needed:

'click .js-edit-action': function(event, t) {
    var $this = $(event.currentTarget),
    container = $this.parents('.phenom-comment');

    // open and focus
    container.addClass('editing');
    container.find('textarea').focus();
},

'click .js-confirm-delete-action': function(event, t) {
      CardComments.remove(this._id);
},

2 Scoped ReactiveVar within the template instance

if (Meteor.isClient) {  
  Template.hello.created = function () {
  // counter starts at 0
  this.counter = new ReactiveVar(0);
};

Template.hello.helpers({
  counter: function () {
  return Template.instance().counter.get();
  }
});

Template.hello.events({
  'click button': function (event, template) {
    // increment the counter when button is clicked
    template.counter.set(template.counter.get() + 1);
  }
});
}

3 Utilizing Iron-Router's state variables

Obtain

Router.route('/posts/:_id', {name: 'post'});

PostController = RouteController.extend({
  action: function () {
    // set the reactive state variable "postId" with a value
    // of the id from our url
    this.state.set('postId', this.params._id);
    this.render();
  }
});

Define

Template.Post.helpers({
  postId: function () {
    var controller = Iron.controller();

    // reactively return the value of postId
    return controller.state.get('postId');
  }
});

https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#setting-reactive-state-variables

4 Modification of Collection data

An alternative method involves updating data in your collection directly. This approach can be suitable depending on the circumstances.

5 Adjusting the data context

In my opinion, Session is often not the best choice. Additionally, I prefer not to use the #3 method as I believe having less dependency on iron-router could be beneficial in case a switch to another router package like "Flow" is considered.

Meteor JS: How can I effectively manage the state of a unique template?

Answer №1

Answer №2

1 Using addClass/removeClass

2 Scoped ReactiveVar within the template instance

3 Utilizing Iron-Router's state variables

4 Modification of Collection data

5 Adjusting the data context

Similar questions

Using PHP Escape Functions in JavaScript

What are some ways to monitor the movement of elements and activate functions at precise locations?

Using JavaScript and jQuery to calculate the time difference between two values

Angular 2's Implementation of Hierarchical Dependency Injection

Send data from input to controller without using $scope

Updating HTML in Vue.js with data at a specific index value can be done by targeting

Validating dynamic textboxes in Angular with custom rules

Find the element that is being scrolled in order to delete its attributes

Instructions for user to upload and play an MP4 file on their PC

Creating a duplicate of a Flex object in HTML without the need to reinitialize

Utilizing numerous Nuxt vuetify textfield components as properties

The imported package is not functioning properly within the project

Why is my "npm install" pulling in unnecessary libraries that I didn't even mention?

Align list items in the center horizontally regardless of the width

Having trouble with React Testing Library throwing an error every time I try to use fireEvent on an input text?

Is there a more effective method for detecting changes in a class variable in JavaScript, aside from using setInterval()?

Instructions for creating a slush machine

Utilizing Nuxt3's auto-import feature alongside Eslint

I'm having trouble executing the straightforward code I discovered on GitHub

AngularJS variable assignment with HTTP GET operation