1. #1
    Sencha Premium Member
    Join Date
    Apr 2014
    Posts
    25
    Vote Rating
    1
    fruel is on a distinguished road

      0  

    Default Unanswered: Listening model changes from a view model

    Hi,

    I have a view model handling a model. On another view I have a grid showing records of the same model. The user can take action on records which will change the value of some field of the records.

    How can I be notified when fields of the model of my view model changed?

    In other words how can a view model listen changes from a model?

    Thank you

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,583
    Vote Rating
    1137
    Answers
    3709
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    A ViewModel shouldn't have logic like this, a controller should. The issue is, Ext.data.Model doesn't fire events so there isn't a way to listen to events on it. You need to architect your app to work around this, kind of hard to help on that part as I'm not involved in your application.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2014
    Posts
    25
    Vote Rating
    1
    fruel is on a distinguished road

      1  

    Default

    Thank you for your answer. Handling my case in the view controller is certainly possible. I was thinking about model events because of the architecture schema I saw in the "What's new in Ext JS 5" article:
    Untitled.jpg

    I may misunderstood something (I'm quite new in the Ext JS world) but the grid has a nice "getRowClass" functionality that is called each time a model changed to update the UI. However if I have other UI component in the application binding to the same data I want to make a view model but then I have one component depending on the model and others depending on the view model.

    Here's some information about what I try to accomplish:

    I have a grid with a master-detail panel. The grid has an action column with a Like and a Dislike button. The style of the buttons are different depending on a "preference" property on the model. For this I'm using the getClass support on the action column and each time the model preference changed the buttons style change automatically.

    In the detail pane I also have the same two button. I have a view model for this. If the user click a button in the grid I want my panel to update. My first idea was to listen prefence change in the view model to update the UI but I can't do this. Sure I can have a view controller to inform the pane something happens but it would be nice to leverage the model here.

    Thank for any advice!

  4. #4
    Sencha User
    Join Date
    Nov 2014
    Posts
    13
    Vote Rating
    3
    MihaiS is on a distinguished road

      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    A ViewModel shouldn't have logic like this, a controller should. The issue is, Ext.data.Model doesn't fire events so there isn't a way to listen to events on it. You need to architect your app to work around this, kind of hard to help on that part as I'm not involved in your application.
    There is a problem with this approach, considering the ViewModel's delayed value processing. Let's say I have a textfield and the Controller is hooked up to it's 'change' event. When the event fires, the ViewModel still has the old value, so you can't use it. It's not a big deal to get the value from the event but it just seems a bit backward if I'm trying to get my Controller to interact only with the ViewModel when it comes to getting/setting values.

  5. #5
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    102
    Vote Rating
    7
    Answers
    5
    bhutten is on a distinguished road

      0  

    Default

    Quote Originally Posted by MihaiS View Post
    There is a problem with this approach, considering the ViewModel's delayed value processing. Let's say I have a textfield and the Controller is hooked up to it's 'change' event. When the event fires, the ViewModel still has the old value, so you can't use it.
    I've also run into this issue. This thread might be useful https://www.sencha.com/forum/showthr...iddle-included

  6. #6
    Sencha User
    Join Date
    Nov 2014
    Posts
    13
    Vote Rating
    3
    MihaiS is on a distinguished road

      0  

    Default

    It appears I don't have access to the link you posted...

  7. #7
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    102
    Vote Rating
    7
    Answers
    5
    bhutten is on a distinguished road

      1  

    Default

    Quote Originally Posted by MihaiS View Post
    It appears I don't have access to the link you posted...
    Sorry - here's the fiddle with the example code I wrote to illustrate the problem I was having and some possible solutions:


  8. #8
    Sencha User
    Join Date
    Nov 2014
    Posts
    13
    Vote Rating
    3
    MihaiS is on a distinguished road

      0  

    Default

    Thank you for the code, bhutten. It actually made me realise that the 'bind' method itself works as an event for when the value is updated in the ViewModel (should've read the documentation more carefuly...).
    I've modified your fiddle a bit, removed the {rnd} value altogether and hooked up the Controller directly to the {filter} value change. This way displayValue is always called after the {filter} value is updated (fiddle here: https://fiddle.sencha.com/#fiddle/ni3 ).