Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Workaround: Child component's ViewModel breaks it's publish properties

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

    Default Answered: Workaround: Child component's ViewModel breaks it's publish properties

    Hi there!

    This is a discussion about a temporary workaround.


    There are several topics on the forum about defining a ViewModel inside a child component.

    The problem is that a child component does not publish changes of it's published properties up by hierarchy if it has it's own ViewModel.

    Publish_Hierarchy.png

    Demo (with patch): https://fiddle.sencha.com/#fiddle/mm0

    They say there is a ticket for such feature request (EXTJS-15503) but nobody knows when will it be realized. My feeling told me that there is shouldn't be something difficult and after some research I've made a patch.
    DEPRECATED. See other posts.
    Code:
    Ext.define('Ext.ux.app.ViewModel', {
       override: 'Ext.app.ViewModel',
    
        set: function (path, value) {
            var me = this,
                parentVm = me.getParent(),
                parts,
                view;
    
            if (parentVm && path && path.split && (parts = path.split('.')).length > 1) {
                // If we have 'foo.something' and 'foo' is the reference name
                if ((view = me.getView()) && view.getReference() == parts[0]) {
                    parentVm.set(path, value);
                }
            }
            me.callParent(arguments);
        }
    });
    You can try it in the demo (link above).

    It works for me but I want you (the community) to test it for the side effects. I hope they shouldn't exists but who knows

    P.S.
    The patch targets `Ext.app.ViewModel` but in theory it should change `Ext.mixin.Bindable.publishState` method. Since it is private and complicated I decided to keep the patch simple - the logic remains same.
    Last edited by Alexey.Solonets; 15 May 2015 at 5:51 AM. Reason: Title updated

  2. Ok, I have updated the workaround and now it looks much better! It targets Ext.mixin.Bindable as it should. Finally it is possible to use ViewModels as we expect: create fully independent components with own ViewModels and ViewControllers. Also we can now bind to own published properties. See this fiddle for the example:

    https://fiddle.sencha.com/#fiddle/mvv


  3. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Thanks for posting your example.

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

    Thumbs up

    Ok, I have updated the workaround and now it looks much better! It targets Ext.mixin.Bindable as it should. Finally it is possible to use ViewModels as we expect: create fully independent components with own ViewModels and ViewControllers. Also we can now bind to own published properties. See this fiddle for the example:

    https://fiddle.sencha.com/#fiddle/mvv

    Last edited by Alexey.Solonets; 17 May 2015 at 11:49 PM. Reason: edited the workaround code

  5. #4

    Default

    This is exactly what I need, independent component ViewModels. I'm having some issues with this workaround though-

    1. Internal binding in the child component doesn't seem to propagate out to the parent like I would it expect it to
    2. Giving a config/viewmodel property the same name in both the parent and the child seems to break everything (maybe shadowing due to some internal viewmodel inheritance?)

    Here's an example where the workaround fixes binding "foo" down to the Test component's inner text field, but as you can see, modifications to the value of the Test component's inner text field aren't propagated back up to the parent panel's "foo".


    Additionally, if "foo" is renamed to "value" in the parent the whole system breaks, so these ViewModels must not be truly independent.

    Any ideas?

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

    Default

    Hi, since I've posted the workaround, I've made some changes and created a project on GitHub.

    https://github.com/alexeysolonets/extjs-mvvm-extensions

    The explanation with examples is here (need to use Google Translate, sorry, I will rewrite it in English ASAP)

    https://habrahabr.ru/post/266773/

    Shortly, the project contains 2 parts: the Bindable extension, that allows a component to bind to it's own configs, and the ViewModel extension that really separates each ViewModel data in the project. I use both in all of my projects but it's up to you.

    Currently it works with Ext Js v.5. And needs some small changes to work with 6.x.

    P.S. I'm on vacation currently and have no ability to review your code since I'm using the mobile phone only. But I will try to answer your questions if needed.

  7. #6

    Default

    Oh, awesome, I will take a look. Really appreciate the work you've put into this, I've spent forever trying to figure out what to do.

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

    Default

    I've published the article (2 articles to be exact). Yes, 4 months later, sorry. Anyway, could you please take a look at them

    Ext JS MVVM Tricks: Part 1. Self Binding
    https://www.codeproject.com/Articles/1177897/Ext-JS-MVVM-Tricks-Part-Self-Binding

    Ext JS MVVM Tricks: Part 2. ViewModel Isolation
    https://www.codeproject.com/Articles...odel-Isolation

    Also the description at GitHub has also been updated. It is shorter than the articles.
    https://github.com/alexeysolonets/extjs-mvvm-extensions

    I would appreciate your comments.

  9. #8
    Sencha User
    Join Date
    Mar 2017
    Posts
    10
    Answers
    2

    Default

    Quote Originally Posted by Alexey.Solonets View Post
    I've published the article (2 articles to be exact). Yes, 4 months later, sorry. Anyway, could you please take a look at them

    Ext JS MVVM Tricks: Part 1. Self Binding
    https://www.codeproject.com/Articles/1177897/Ext-JS-MVVM-Tricks-Part-Self-Binding

    Ext JS MVVM Tricks: Part 2. ViewModel Isolation
    https://www.codeproject.com/Articles...odel-Isolation

    Also the description at GitHub has also been updated. It is shorter than the articles.
    https://github.com/alexeysolonets/extjs-mvvm-extensions

    I would appreciate your comments.
    I tried your code on github, it works pretty cool. Solved a lot of problem for me.
    While in you fiddle,
    https://fiddle.sencha.com/#fiddle/1sod
    it seems when updating the inner container, the outer one does not change. I met a similar problem, when inner element changes, the binding cannot trigger the outer view model formulas 'set' function.
    I am not sure whether it is because I mis-used it. still trying to solve it.
    Can you give me some suggestion?

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

    Default

    Quote Originally Posted by jackrui View Post
    I tried your code on github, it works pretty cool. Solved a lot of problem for me.
    While in you fiddle,
    https://fiddle.sencha.com/#fiddle/1sod
    it seems when updating the inner container, the outer one does not change. I met a similar problem, when inner element changes, the binding cannot trigger the outer view model formulas 'set' function.
    I am not sure whether it is because I mis-used it. still trying to solve it.
    Can you give me some suggestion?
    Hi, thanks for your comment, I'm happy that it helps.

    As far as I understand, the thing you want to achieve is called two-way binding, so you could've used the twoWayBindable config. But it doesn't work by design. Two-way binding works among components within a single ViewModel and only changes the data of a ViewModel, not the configs of a component. So as soon you decide to add a ViewModel to a child component, you loose the ability of bidirectional binding.

    However, although I personally beware two-way bindings because it may become difficult to support them, there is a way to implement it's functionality. I've got the idea from this article. In our case it is a little bit easier: https://fiddle.sencha.com/#fiddle/1vhg.
    Let me know what you think.

  11. #10
    Sencha User
    Join Date
    Nov 2015
    Location
    Paris
    Posts
    34

    Default

    I just found out this thread, thx Alexey, your plugin is a very useful contribution !

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 4
    Last Post: 28 Apr 2015, 10:20 AM
  2. Replies: 3
    Last Post: 28 Apr 2015, 10:18 AM
  3. Replies: 2
    Last Post: 3 Sep 2014, 5:40 AM
  4. Forcing parent ViewModel data to be available to child
    By estesbubba in forum Ext 5: Q&A
    Replies: 1
    Last Post: 14 Aug 2014, 4:25 AM
  5. How to listen ViewModel properties changes?
    By nikolay.bobrovskiy in forum Ext 5: Q&A
    Replies: 2
    Last Post: 19 Jun 2014, 3:24 AM

Posting Permissions

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