Results 1 to 10 of 10

Thread: How to use nested ViewModel?

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    53
    Answers
    2

    Default Answered: How to use nested ViewModel?

    Hi everyone.

    Since we can use ViewControllers for any view regardless their nesting hierarchy I was expecting for ViewModels to work same way. But looks like in several cases I can use only one ViewModel per hierarchy.

    For example I have root Panel with Grid inside. Both of them have their own ViewModels but Panel also wants to use Grid's properties using binding. And this idea doesn't work.

    Fiddle is here: https://fiddle.sencha.com/#fiddle/hc9

    Is it a bug or maybe I misunderstand the design?

    Thank you.

  2. Hi Alexey--

    There is currently a feature request open to allow this kind of functionality (EXTJS-15503).

    It may not be ideal, but could you add a selection listener to the grid, and update the owning component's viewmodel?

    Thanks
    Joel

  3. #2
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    21
    Answers
    2

    Default

    Hi, in reading your question, I can say that you should be able to have more than one viewModel in a hierarchy, if that is what you want. You could also have one viewModel for multiple child sub components, which I think would solve your issue.

    I tried to look at your fiddle and I've never tried viewModel: true (didn't even know it would work at all). The docs say "A View Model is a class that managed a data object" and that's how I've always tried to use it. In any case, I would create a viewModel class, add a data object with an element that you bind your grid selection to. I took a quick example from the sencha docs and merged it in with a fork from your Fiddle. It doesn't use the grid so you'll have to merge it together better with yours, but you can see the binding works if you type in the fields: https://fiddle.sencha.com/#fiddle/hrg

    G
    ood Luck!

  4. #3
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    53
    Answers
    2

    Default

    Hi

    Thank you for your answer and for the fiddle. I'll answer the question about "viewModel: true" first. This is allowed and there is no big difference in internals between "true" or "{ data: {} }" or "{ type: 'mygridmodel' }" for this example. I've just wanted to make the source shorter.

    The idea was to create an isolated reusable component with own view model that could be used somewhere else where there is another view model. In my example that reusable component was the grid which updates own title from selection using binding.

    I have searched for this problem again and found same questions:
    http://www.sencha.com/forum/showthread.php?294594 - here said that it is not supported currently
    http://www.sencha.com/forum/showthread.php?297703 - unanswered

  5. #4
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi Alexey--

    There is currently a feature request open to allow this kind of functionality (EXTJS-15503).

    It may not be ideal, but could you add a selection listener to the grid, and update the owning component's viewmodel?

    Thanks
    Joel

  6. #5
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    53
    Answers
    2

    Default

    Yes, of course, listeners this is how we all used to do. It would be great for this request to be realized. And I probably understand why it isn't yet: bindings are designed to work with references within a single viewmodel. Either way bindings may look like selectors in controllers, that is much more difficult.

  7. #6
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    21
    Answers
    2

    Default

    Hi Alexey,
    Based on what you are saying you are trying to do, I still think you can do it (or I'm not understanding what you're asking). You can have a component with a viewModel, and a "parent" component with a different view model, and binds in the child component will flow upward to the data elements in the parent, so long as they are not already used in the child component.
    https://fiddle.sencha.com/#fiddle/hu5

    In
    that fiddle, the parent component viewModel receives the firstName and lastName changes and then updates downward. And the child viewModel receives address1 and address2 and updates.

    Does that help?

  8. #7
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    53
    Answers
    2

    Default

    Hi James,

    Thank you for your help, I appreciate it.

    Yes, the example you have provided does work. And there is something you have also noticed in comments: the 'title' field exists in both models. But what if someday I will have two reusable components (for example a documentsgrid and a mailgrid) which both have 'title' in their viewmodels? In this case I will not be able to use both titles in parent viewmodel. So I wish that the encapsulation principle worked here too.

  9. #8
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    21
    Answers
    2

    Default

    Hi Alexey,
    Yes, exactly! I think having the same data objects in different viewModels receiving the binds is something they should add/fix (which it seems they are planning to do), but at least having different data object names seems to work for now, and is quite useful.

    James

  10. #9
    Sencha Premium Member
    Join Date
    Oct 2007
    Location
    Munich
    Posts
    37

    Default

    I'm also not a huge fan of the whole inheritance dependent on component hierarchy thingy. Seems like a recipe for side-effects if you're not extremely careful at which point in the hierarchy a property is first defined.

    Are there any concrete plans where Sencha wants to move with MVVM?

    Currently I would hardly call the ExtJS implementation MVVM at all. There's a lot more to MVVM than just binding properties. It's a great pattern if you have good framework, sadly ExtJS just isn't up to par.

    I really liked GluJS by CoNarrative. As you already bought mzSolutions, maybe buy them too while you're at it? Or at least get "inspired" by the way GluJS does things.

  11. #10
    Sencha Premium Member
    Join Date
    Nov 2010
    Posts
    53
    Answers
    2

    Default

    I'm inviting everyone to check out and discuss the temporary solution here https://www.sencha.com/forum/showthr...ish-properties

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •