mercredi 9 août 2017

EmberJS with x-select - how to persits selected option after model refresh?

I'm newbee in EmberJS, it's my first app.

I'm trying to show data table with two selects ("emberx-select": "^3.1.0"), which should to load from the server the data filtered by selected values.

The data is successfully loaded from the server and displayed on the page, but the value of the first x-select (model.msisdn) is lost after this.get('target._routerMicrolib').refresh();

What am I doing wrong?

Thank you!

    Ember-cli: 2.14.2
    node: 8.2.1
    os: win32 x64

\app\router.js

...
Router.map(function() {
  this.route('msisdn', function() {
    this.route('show', { path: '/:id/:msisdn/cdr' });
  });    
});
...

\app\controllers\msisdn\show.js

...
import Ember from 'ember';
import config from '../../config/environment';

export default Ember.Controller.extend({
    actions: {
        setInterval(value) {
            var model = this.get("model");
            model.period = value;
            this.set("model", model);
            this.get('target._routerMicrolib').refresh();
        },
        setMSISDN(value) {
            var model = this.get("model");
            model.msisdn = value;
            this.set("model", model);
            this.get('target._routerMicrolib').refresh();
        }
    }
});
...

\app\routes\msisdn\show.js

...
import Ember from 'ember';
import config from '../../config/environment';

export default Ember.Route.extend({
    period: "0",
    msisdn: "0",

    beforeModel(transition) {
    },

    model(params) {

        var period = this.get("period"), msisdn = this.get("msisdn");

        if(this.hasOwnProperty("currentModel") && this.currentModel) {
            period = this.get("currentModel").hasOwnProperty("period") ? this.get("currentModel").period : period;
            msisdn = this.get("currentModel").hasOwnProperty("msisdn") ? this.get("currentModel").msisdn : msisdn;
        }

        return Ember.RSVP.hash({
            v_id :  params.id,
            trafficDetail : Ember.$.getJSON('/ajax/getTrafficDetail/'  + msisdn + '/' + period + '/').then(function(response) {
                    return response;
                    }),
            intervals: Ember.$.getJSON('/ajax/getIntervals/').then(function(response) {
                    return response;
                    }),
            start: Ember.$.getJSON('/ajax/getSummaryFirstContractInfo/' + params.id + '/').then(function(response) {
                    return response;
                    })

        });
    },

    afterModel(model, transition) {
        //this.transitionTo('msisdn.show', model.msisdn);
    }
});
...

\app\templates\msisdn\show.hbs

...        

    
        
            
        
    
            


    
        
    
        

<table class="data-table detalization">
    <tbody>
    
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    
        
            <tr>
                <td colspan="8" class="no-reults"></td>
            </tr>
        
            <tr>
                <td colspan="8" class="no-reults">&mdash;</td>
            </tr>
        
    
    </tbody>
</table>
...




Aucun commentaire:

Enregistrer un commentaire