Giter VIP home page Giter VIP logo

lwc-if-expressions's Introduction

lwc-if-expressions

<c-lwc-if condition="(this.a == this.b) && (this.c == 6 || this.b == 'easypeasy')" scope={scope}>
    <div slot="if">
        IFFFFFFFFFFFFFFFFF
    </div>
    <div slot="else">
        ELSEEEEEEEEEEEEEE
    </div>
</c-lwc-if>

Does it look more readable? let's take a deeper look:

Write expressions in component definition to handle complex rendering scenarios without learning a new expression language.

With Visualforce & Aura, developers had luxury to render HTML based on expressions, Eg. {!A == B} While Lightning web component needs the use of individual javascript get properties to achieve similar feats, here's an example how you can natively achieve this:

In template:

<template if:true={decision}>
    print this
</template>

In JS Controller:

get scope(){
    return this.a == this.b;
}

the above example bounds you to implement multiple get properties within js controller.

Now lets rewrite the same using lwc-if-expressions

In template:

<c-lwc-if condition="this.a == this.b" scope={scope}>
    <div slot="if">
        IFFFFFFFFFFFFFFFFF
    </div>
    <div slot="else">
        ELSEEEEEEEEEEEEEE
    </div>
</c-lwc-if>

In JS Controller:

get scope(){
    return {
        a : this.a,
        b : this.b
    }
}

So for complex,multiple rendering scenarios we only need to create a single scope get() property which would contain all the decision making props within the expression, which allows you to write expressions within the templates and makes code more readable & easy to implement.

Get Started:

You'd find a working example for lwc-if-expressions in the example module.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.