If a childView is instantiated in an entry point i...
# suitecommerce
k
If a childView is instantiated in an entry point in the done() of a model fetch. Should the model event listeners defined in the childView still trigger?
s
Yes. If you're experiencing problems it could be because the events aren't bound to the model when they're being triggered. Ie, it could be an execution order problem. Without being more specific, it's hard to give advice
k
entry point:
Copy code
let model = new CustomModel();

model.fetch({
    email: '<mailto:testing@gmail.com|testing@gmail.com>'
}).done(function (result) {
    HeaderView.prototype.childViews['Header.SavedCart.Dropdown.View'] = function () {
        return new HeaderSavedCartDropdown({
            application: container, 
            model: result
        });
    }
});
childview:
Copy code
initialize: function (options) {
    this.model = options.model;

    this.model.on('change', function () {
        this.render();
    }, this)
}

changeCart: function (e) {
    let self = this; 
    let data = {'customerId' : '1234'};

    this.model.save(data).done(function (result) {
        self.model.set({'currentSelection': result.internalid});
    });
}
s
OK, and is it not rendering?
k
It is not.. ? current workaround is this..
Copy code
changeCart: function (e) {
    let self = this; 
    let data = {'customerId' : '1234'};
    this.model.save(data).done(function (result) {
        self.parentView.render();
    });
}
s
Sorry, I'm still not clear here. When is changeCart called? Is the initial render working in the
initialize
? I don't see how your first
changeCart
code is worked around by the second one. Perhaps it would be helpful if you could just describe what it is you're trying to do
k
We have a dropdown in the header.. that’s my childView. There is a current option selected on page load. When a user makes a new selection from the drop down, the changeCart event runs. I need the childView to update in order to display the newly selected option.
s
1. Is the initial render happening, ie when the page first loads? 2. How/when is changeCart called? 3. What exactly do you think is the problem? Is it that the event is not being called, or that the re-render of the child view is not working? It's kinda hard for me to diagnose what's going wrong here because I don't know exactly at what point it's breaking down.
eg:
Copy code
initialize: function (options) {
    console.log('initialize called');
    this.model = options.model;
    this.model.on('change', function () {
        console.log('model changed, render called');
        this.render();
    }, this)
}
changeCart: function (e) {
    console.log('changeCart called');
    let self = this; 
    let data = {'customerId' : '1234'};
    this.model.save(data).done(function (result) {
        console.log('model saved called');
        self.model.set({'currentSelection': result.internalid});
    });
}
I'm also a bit confused as to why after saving a model you would then immediately set a new value on it?
k
Yes the initialize is working, as is the changeCart event. The model is being set and I am logging the value correctly on the model after setting it. There is no error at this point.
The fetch returns a handful of custom records. I am comparing the result of my SAVE to a value on the LOM. So after my fetch has completed, I want to set the custom record internalid on the model.
s
OK, I still don't understand the specific problem. It sounds like your code is not working here:
Copy code
this.model.on('change', function () {
        console.log('model changed, render called');
        this.render();
    }, this)
So, please, tell me what exactly is not working. For example: "this is not being triggered" or "it is being triggered but this.render()" is not working
k
I can confirm the .on(‘change’) is not running..
s
Could you do me a favour and just change it to
this.model.on('change', this.render, this);
👍 2