https://github.com/bem-contrib/bem-flux

Flux implementation on top of bem-core.
https://github.com/bem-contrib/bem-flux

Last synced: 6 months ago
JSON representation

Flux implementation on top of bem-core.

• Host: GitHub
• URL: https://github.com/bem-contrib/bem-flux
• Owner: bem-contrib
• Created: 2015-07-09T21:55:19.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-02-18T10:34:21.000Z (about 9 years ago)
• Last Synced: 2024-03-27T13:53:23.450Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://slidedeck.io/sameoldmadness/bem-flux-slides
• Size: 12.7 KB
• Stars: 14
• Watchers: 13
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
BEM-Flux

========

Flux implementation on top of [bem-core](https://github.com/bem/bem-core/).

> And what's about React?

BEM stack provides a full-featured view layer and could be a great replacement for React.

Example

-------

```js

modules.require(['i-flux'], function (provide, FLUX) {

    var dispatcher = FLUX.DISPATCHER.create();

    var orderActions = FLUX.ACTIONS.create({

        dispatcher: dispatcher,

        actions: {

            orderPizza: ['size', 'price'],

        }

    });

    var ordersStore = FLUX.STORE.create({

        dispatcher: dispatcher,

        state: {

            size: null,

            price: null

        },

        handlers: [

            [orderActions.orderPizza, function (data) {

                this._set('size', data.size);

                this._set('price', price * 0.9); // discouont :)

                this.emitChange();

            }]

        ]

    });

    var controller = FLUX.CONTROLLER.decl('phone__controller', {

        stores: [

            [ordersStore, function (store) {

                this.findBlockInside('cart').setVal(store.get('price'));

            }]

        ],

        views: {

            'pizza.button': {

                click: function (event) {

                    var size = this.findBlockInside('size', 'input').getVal();

                    var price = this.findBlockInside('price', 'input').getVal();

                    orderActions.orderPizza(size, price);

                }

            }

        }

    });

});

```