Giter VIP home page Giter VIP logo

fabstate's Introduction

Deprecated: старый баян

FABSTATE

Менеджер состояния форм для AngularJS

Использование

Представим, что мы используем в качестве $scope переменную form, тогда получим следующий код.

var state = createState({  
    
    // Состояние - просто объект
    state: {
        enabled: false,
        
        // После ассигнации выражения функции будут доступны в виде getter'ов
        computed: function() {
            // В computed выражениях this - это универсальный внутренний объект
            // Содержит в себе state и form = $scope
            return this.state.enabled.toString()
        },
        
        // ..поэтому вы можете использовать декораторы, которые возвращают другие функции (см. decorators.js)
        expression: decorators.expression('state.enabled')
        
        // И вы можете использовать даже substate-ы
        expression: decoratoes.substate({
            state: {
                enabled: false
            },
            dispatcher: function(state) {
                return {
                    toggle: function() {
                        state.enabled = !state.enabled
                    }
                }
            }
        })
    },
    
    // Диспетчер принимает в себя state и возвращает объект с actions
    // Это сделано для того, чтобы иметь возможность инициализировать какие-нибудь данные перед вычисление диспетчера.
    dispatcher: function(state, context) {
        return {
            toggle: function() {
                state.enabled = !state.enabled
            }
        }
    },
    
    // Deprecated
    connect: {
        input: function(params) {
            return {
                type: params.inputType
            }
        }
    },
    
    // Микшины - это функции, котороые возвращают мини-диспетчеры, которые буду вызваны перед главным диспетчером
    mixins: []
}).name('state') // Имя состояния / в view будет доступно как $scope.[name] 

// Loader инициализирует state и добавляет его в $scope
var loader = createLoader($scope);

// Вы можете использовать столько state'оы сколько пожелаете нужным, главное - не повторять имен.
// Обмениваются данными state'ы через context
loader.use(state);

И на примере использования компонентного подхода, у нас есть такой код.

<fab-form
    caption="Caption">
    <fab-row>
        <fab-col>
            <fab-edit
                caption="Field"
                enabled="{{state.enabled}}"
                value="state.type">
            </fab-edit>
        </fab-col>
        <fab-col>
            <fab-button
                caption="Toggle"
                on-click="state.dispatch('toggle')">
            </fab-button>
        </fab-col>
    </fab-row>
</fab-form>

API

fabstate's People

Contributors

cloudever avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

nirikshan

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.