vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

Bind images loaded #464

Open Cezarion opened 9 years ago

Cezarion commented 9 years ago

Hi,

I would like to bind that external images are loaded in a

Do you have any idea ?

Vue.config.debug = true;
    Vue.http.options.root = 'https://my-url';
    Vue.filter('cut', function(value) {
        return value.substring(0,100)+'...';
    });

    var SpacesModel = {
        space: {
            id: '',
            name: '',
            address: '',
            postal_code: '',
            city: '',
            latitude: '',
            longitude: '',
            capacity: '',
            occupancy: '',
            thumbnail: '',
            pictures: '',
            description: '',
            opening_times: ''
        },
        spaces: [],

        city: {
            name: ''
        },
        cities: []
    };

    var SpacesVue = Vue.extend({
        methods: {
            // We dedicate a method to retrieving and setting some data
            fetchSpaces: function() {
                var spaces = [];
                this.$http.get(this.$http.options.root+'/spaces')
                    .success(function(response) {
                        this.$set('spaces', response.spaces);
                        this.fetchCities(response.spaces);
                        $('.loader').fadeOut();
                    })
                    .error(function(error) {
                        console.log(error);
                    });
            },

            // Adds an event to the existing events array
            fetchCities: function(spaces) {
                var cities = [],
                    tmp = [];

                for (var i in spaces) {
                    if (tmp.indexOf(spaces[i].city) < 0) {
                        var current = {
                            'name': spaces[i].city
                        };
                        cities.push(current);
                    }
                    tmp.push(spaces[i].city);
                }

                this.$set('cities', cities);
            }
        }
    });

      var SpacesFilter = new SpacesVue({
    // We want to target the div with an id of 'spaces'
    el: '#spaces',
    // Here we can register any values or collections that hold data
    // for the application
    data: $.extend(SpacesModel, { selected: '' }),
    directives: {
        image: {
            bind: function(){
                //console.log(this.el);
                console.log(this.el);
            }
        }
    },
    watch: {
        image: function (oldVal, newVal) {
            console.log(oldVal, newVal);
        }
    },
    computed: {
        defaultSelected: {
            get: function () {
                if( this.cities.length > 0 ){
                    this.cities = this.sort(this.cities);
                    return this.cities[0].id;
                }
            }
        }
    },
    ready: function() {
        this.fetchSpaces();
    },
    methods: {
        loadMap: function(){
            this.$nextTick(function(el){
                console.log(el);
                $('.gmap-wrapper').css({'height' : $('#main-wrapper').outerHeight() + 40 + 'px' });
                console.log('BIS : ' + $('#main-wrapper').outerHeight());
                initMap();
            });
        },
        // We dedicate a method to retrieving and setting some data
        fetchSpaces: function() {
            var spaces = [];
            //return this.$http.get('/spaces');

            this.$http.get(this.$http.options.root+'/spaces').success(function(response) {
                    this.$set('spaces', response.spaces);
                    this.fetchCities(response.spaces);
                    this.$set('selected', this.defaultSelected);

                    //$('.loader').fadeOut().remove();

                    this.loadMap();

                    return true;
                })
                .error(function(error) {
                    console.log(error);
                    return false;
                });
        },
        sort: function( obj ){
            obj.sort(function(a, b){
                var nameA=a.name.toLowerCase(), nameB=b.name.toLowerCase();
                if (nameA < nameB){ //sort string ascending
                    return -1; }
                if (nameA > nameB){
                    return 1;
                }
                return 0; //default return value (no sorting)
            });

            return obj;
        }
    }
});        

thank's for your help.