Vue: рдЙрджрд╛рд╣рд░рдг $ рдкреНрд░реЗрд╖рдг рдореВрд▓реНрдп рд╡рд╛рдкрд╕ рдирд╣реАрдВ рдХрд░реЗрдЧрд╛

рдХреЛ рдирд┐рд░реНрдорд┐рдд 31 рдЬрдире░ 2016  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vuejs/vue

рдирдорд╕реНрддреЗ, рдореИрдВ vm.$dispatch рдмрд╛рд░реЗ рдореЗрдВ рдереЛрдбрд╝рд╛ рдЙрд▓рдЭрди рдореЗрдВ рд╣реВрдВ рдХреНрдпреЛрдВрдХрд┐ рдореБрдЭреЗ рдЙрдореНрдореАрдж рд╣реИ рдХрд┐ рдпрд╣ рд╢реНрд░реЛрддрд╛ рдХреЗ рдХреЙрд▓рдмреИрдХ рд╕реЗ рдЖрдЧреЗ рдХреЗ рддрд░реНрдХ рдХреЗ рд▓рд┐рдП рдореВрд▓реНрдпреЛрдВ рдХреЛ рд╡рд╛рдкрд╕ рдХрд░реЗрдЧрд╛ рдЬрд┐рд╕реЗ рдХреЙрд▓рдмреИрдХ _ (рдЖрдИрдПрдордУ) _ рдореЗрдВ рдирд╣реАрдВ рд░рдЦрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдпрд╣ рдирд┐рдХрд▓рд╛ рдЙрджрд╛рд╣рд░рдг рдпрд╣ рд╕реНрд╡рдпрдВред рдореИрдВ Vue рд╕реАрдЦ рд░рд╣рд╛ рд╣реВрдБ рдФрд░ рд╢рд╛рдпрдж рдХреБрдЫ рдЫреВрдЯ рдЧрдпрд╛ рд╣реИред

var vm = new Vue({
    // omitted
    events: {
        'object:creating' : function (args) {
            // omitted
            return false;
        },
        'object:created' : function (args) {
            // omitted
        }
    }
});

var child = new Vue({
    parent: vm,
    // omitted
    methods: {
        performWhatever: function (args) {
            //
        },
        createObject: function (args) {
            // Pre-create
            if ( this.$dispatch('object:creating', args) === false ) {
                // Stop the creation
            }
            // The business logic
            this.performWhatever(args);

            // Post-create
            this.$dispatch('object:created', args);
        }
    }
})

рдЬреИрд╕рд╛ рдХрд┐ рдЖрдк рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ, рдкреНрд░реА-рдХреНрд░рд┐рдПрдЯ рдСрдкрд░реЗрд╢рди рд╡реИрдХрд▓реНрдкрд┐рдХ рд╣реИред
рдзрдиреНрдпрд╡рд╛рджред

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

  1. $ рдкреНрд░реЗрд╖рдг рдХрд╛ рдХреЛрдИ рд╡рд╛рдкрд╕реА рдореВрд▓реНрдп рдирд╣реАрдВ рд╣реИред
  2. рдЗрд╡реЗрдВрдЯ рд╕рд┐рд╕реНрдЯрдо ($ рдкреНрд░реЗрд╖рдг, $emit рдФрд░ рдЗрд╕реА рддрд░рд╣) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдЖрдкрдХрд╛ рдХреЛрдб рдПрд╕рд┐рдВрдХреНрд░реЛрдирд╕ рд╣реЛрдЧрд╛, рдЬрд┐рд╕рдХрд╛ рдЕрд░реНрде рд╣реИ рдХрд┐ рдЖрдЧреЗ рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ рд╕рдВрджреЗрд╢ рд░рд┐рд╕реАрд╡рд░ рджреНрд╡рд╛рд░рд╛ рддрдп рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЖрдк рдХреБрдЫ рдРрд╕рд╛ рдирд╣реАрдВ рд▓рд┐рдЦрддреЗ рд╣реИрдВ
    SomeAsyncCode === false
  3. рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рджреБрдирд┐рдпрд╛ рдореЗрдВ, рд╣рдо рдЕрддреБрд▓реНрдпрдХрд╛рд▓рд┐рдХ рддрд░реНрдХ рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдХреЙрд▓рдмреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ (рд╡рд╛рджреЗ рдмреЗрд╣рддрд░ рд╣реИрдВ рд▓реЗрдХрд┐рди рдпрд╣ рдпрд╣рд╛рдВ рд▓рд╛рдЧреВ рдирд╣реАрдВ рд╣реИ), рдФрд░ $dispatch рдЖрдкрд╕реЗ рдХреЙрд▓рдмреИрдХ рдлрд╝рдВрдХреНрд╢рди рд╕рд╣рд┐рдд рдХрдИ рддрд░реНрдХреЛрдВ рдХреЛ рдкрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЕрдкреЗрдХреНрд╖рд╛ рдХрд░рддрд╛ рд╣реИред
  4. рдЗрд╕рд▓рд┐рдП, рдпрд╣ рд╡рд╣реА рд╣реИ рдЬреЛ рдЖрдкрдХреЛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЪрд╛рд╣рд┐рдП:
this.$dispatch('object:creating', args, function() {
    // The business logic
    this.performWhatever(args);
})

рдФрд░ рд░рд┐рд╕реАрд╡рд░ рдХреА рддрд░рдл,

events: {
    'object:creating' : function (args, callback) {
        // Do something with args and fire callback (or not)
        callback()
    }
}

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

  1. $ рдкреНрд░реЗрд╖рдг рдХрд╛ рдХреЛрдИ рд╡рд╛рдкрд╕реА рдореВрд▓реНрдп рдирд╣реАрдВ рд╣реИред
  2. рдЗрд╡реЗрдВрдЯ рд╕рд┐рд╕реНрдЯрдо ($ рдкреНрд░реЗрд╖рдг, $emit рдФрд░ рдЗрд╕реА рддрд░рд╣) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рдорддрд▓рдм рд╣реИ рдХрд┐ рдЖрдкрдХрд╛ рдХреЛрдб рдПрд╕рд┐рдВрдХреНрд░реЛрдирд╕ рд╣реЛрдЧрд╛, рдЬрд┐рд╕рдХрд╛ рдЕрд░реНрде рд╣реИ рдХрд┐ рдЖрдЧреЗ рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ рд╕рдВрджреЗрд╢ рд░рд┐рд╕реАрд╡рд░ рджреНрд╡рд╛рд░рд╛ рддрдп рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЖрдк рдХреБрдЫ рдРрд╕рд╛ рдирд╣реАрдВ рд▓рд┐рдЦрддреЗ рд╣реИрдВ
    SomeAsyncCode === false
  3. рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рджреБрдирд┐рдпрд╛ рдореЗрдВ, рд╣рдо рдЕрддреБрд▓реНрдпрдХрд╛рд▓рд┐рдХ рддрд░реНрдХ рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдХреЙрд▓рдмреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ (рд╡рд╛рджреЗ рдмреЗрд╣рддрд░ рд╣реИрдВ рд▓реЗрдХрд┐рди рдпрд╣ рдпрд╣рд╛рдВ рд▓рд╛рдЧреВ рдирд╣реАрдВ рд╣реИ), рдФрд░ $dispatch рдЖрдкрд╕реЗ рдХреЙрд▓рдмреИрдХ рдлрд╝рдВрдХреНрд╢рди рд╕рд╣рд┐рдд рдХрдИ рддрд░реНрдХреЛрдВ рдХреЛ рдкрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЕрдкреЗрдХреНрд╖рд╛ рдХрд░рддрд╛ рд╣реИред
  4. рдЗрд╕рд▓рд┐рдП, рдпрд╣ рд╡рд╣реА рд╣реИ рдЬреЛ рдЖрдкрдХреЛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЪрд╛рд╣рд┐рдП:
this.$dispatch('object:creating', args, function() {
    // The business logic
    this.performWhatever(args);
})

рдФрд░ рд░рд┐рд╕реАрд╡рд░ рдХреА рддрд░рдл,

events: {
    'object:creating' : function (args, callback) {
        // Do something with args and fire callback (or not)
        callback()
    }
}

рд╕реНрдкрд╖реНрдЯреАрдХрд░рдг рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж @fnlctrl :)

@fnlctrl рд╡реНрдпрд╛рдЦреНрдпрд╛ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред рдпрд╣ рдЕрддреБрд▓реНрдпрдХрд╛рд▓рд┐рдХ рд╣реИ, рдореИрдВ рднреВрд▓ рдЧрдпрд╛, рдХрд┐рддрдирд╛ рд╢рд░реНрдордирд╛рдХ =D

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

julianxhokaxhiu picture julianxhokaxhiu  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Jokcy picture Jokcy  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

paceband picture paceband  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

WolfgangFellger picture WolfgangFellger  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

loki0609 picture loki0609  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ