Velo by Wix: Imitating Hover Event on Repeater Container

Motivation

We have a $w.Repeater component with items of users' cards. When we point with the mouse cursor over some item, we want to change the background color of this item to light blue color #CCE4F7, and when the cursor moves off of the item, we want to return the initial white color.

For this, we're going to use two other events that provide repeater API:

Exposing HTTP Functions With Corvid

Creating and exposing HTTP functions from your site doesn't have to be a long and tedious process. Sometimes, you may need to share access to your data or functionality from your site. Let's take a look at an easy (and FREE!) way to expose some site data!

Using Corvid, we can easily expose an HTTP function version of our site data or site functionality. I am working on building a Kickstarter style site, so I am going to work on building a function that GETs the current total value of pledges on the product. The site only has one product, so this makes it easier :)

Velo by Wix: Event Handling of a Repeater Item

At first sight, adding event handling for repeated items looks easy. You just handling events of repeated items inside Repeater loop methods there you have all needed data and scope with selector $item().

JavaScript
 




x
12


 
1
$w("#repeater").onItemReady(($itemitemDataindex=> {
2
  // it look easy
3
  $item("#repeatedButton").onClick((event) => {
4
    // we have all we need
5
    console.log(
6
      $item("#repeatedContainer"),
7
      itemData,
8
      index,
9
    );
10
  });
11
});
12

          



What's wrong with this approach?

The Fastest Way to Create an Event Sign-up System

In this post, I’m going to show you how to create a simple event sign up system. Since one of the goals is to create something quickly, we are going to use Corvid to build the application.

Corvid is a development platform from Wix, which allows you to concentrate on the logic of the application using JavaScript and not spend time on writing HTML/CSS to create the UI. Corvid is focused on helping teams dramatically decrease time spent on development and ship products faster.

Serverless Is Great; Serverless Sucks – Making Sense of the Serverless Landscape

Everyone has heard the famous line, “It was the best of times, it was the worst of times.” This famous quote feels like it could perfectly describe the current state of serverless technologies and the way developers are currently building applications for those platforms.

On one hand, serverless is a boon to any company (or developer) building web applications. The idea that one can simply hand off the demands of managing infrastructure to someone else is an alluring prospect for CTOs, managers, or developers building independent projects.

State Management in Corvid

When using Wix, when working with Corvid you don’t need to deal with HTML/CSS when developing UI. Instead, you get a full-blown WYSIWYG editor, where you can create the UI for your application. Then, all that’s left to do is write the application logic, which is really what we want to focus on when developing applications.

Most examples you’ll see today that connect application logic to the view are similar to old-style jQuery applications. You bind an event handler to UI elements, and in response to those events, you run some logic that updates other UI elements with the result.

Build, Manage, Deploy, and Scale Your Next Web Project With Corvid

About Corvid by Wix

Corvid accelerates the way you build production-grade web applications. It’s an open development platform that combines an intuitive visual builder with a built-in IDE, serverless Node.js, integrated databases and more — all backed by the secure Wix Cloud and without the hassle of setting up or managing infrastructure. Invest in your business, product, and services and join the thriving community of developers who use Corvid.

With Corvid you’ll be able to truly maximize your workflow — get zero setup, one-click deployment, gradual rollout of release versions and application telemetry.