Results 1 to 6 of 6

Thread: Best Practice for requiring/providing VM Data

  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    21
    Answers
    1

    Question Best Practice for requiring/providing VM Data

    Hello,

    As-per thread title, I'm wondering if there is a recommended method or best practice for providing and requiring certain data to be provided to a View/ViewModel.

    I have a typical Window containing a number of fields, displays and a Grid that allows the user to build a Sale Order.

    The fields and other components of the Window bind to values and associations on the Order, therefore I like to require an instance of the Order model for the View to be constructed.

    I currently do that in the initComponent method of the View, as-so:
    Code:
    // window creation
    Ext.widget('my-order-window', {
        order: new App.model.Order
    }).show();
    
    // xtype "my-order-window"
    initComponent: function () {
        if (!this.order || ! (this.order instanceof App.model.order)) {
            throw "order configuration is required and must be an App.model.Order.";
        }
    
        this.getViewModel().set('order', this.order);
    
        this.callParent(arguments);
    },
    This is working just fine, though I'm wondering if there is a better approach to this-- perhaps in the initViewModel method on the VC?

    Thank you!

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Does your my-order-window need the order at all? If not, you can just define it on the viewModel on instantiation:

    Code:
    Ext.widget('my-order-window', {
        autoShow: true,
        viewModel: {
            order: new App.model.Order
        }
    })
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    21
    Answers
    1

    Default

    Hey Mitchell,

    Thanks for your response!

    Yes, the Window does require the Order, and I have done as you've demonstrated for other views in the application. I'm especially curious if my manner of providing data to the View/ViewModel is appropriate, i.e., as a configuration to the View, which then assigns it to the VM in the "initComponent" method. Is that alright to do, or is there a more appropriate method?

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    I'd go back to your earlier statement of "perhaps in the initViewModel method on the VC?" and say that the view shouldn't have logic in it so the VC is the more appropriate place there. It also just depends on how you use that order but I assume that if you were able to bind you would have so must be something else in play here as to why you want the order on the view.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    21
    Answers
    1

    Default

    Ok, thanks! That validates my feeling of "code smell" stemming from the wiring/logic stuff in the View.

    I'm still a bit lost on what is the recommended means of wiring up this data, though.

    I think a more appropriate example would be when a Model must be initialized using data retrieved from the server as the result of a User's action.

    Consider a typical "Order / Shipment" scenario. When the User wants to "Ship" and Order, the client application must ask the server which Items on the Order are eligible to Ship. I do this in a static method or "named constructor"; the implementation looks like this:
    Code:
    App.model.Shipment.initializeForOrder(order)
                      .then(function(shipment){
                            // open the "shipment builder window"
                       });
    The question I have is in regards to providing the configured "Shipment" instance to the "Shipment Builder Window" component.

    What I'm doing now:

    Code:
    Ext.widget('shipment-builder-window', {
           shipment: shipment // initComponent ensures 'shipment' configuration is provided; assigns it to the VM
    });
    And that, as we've established, is not ideal.

    Would the following be considered "the right way" or is there an approach that I am not aware of, or some concept I am misunderstanding?

    Code:
    // I can provide VM data as configuration to the Window
    Ext.widget('shipment-builder-window', {
           viewModel: {
               data: {
                    shipment: shipment
               }
           }
    });
    
    // VC ensures the VM has sufficient data for the View to render
    initViewModel: function(vm){
          if(! vm.get('shipment')) { 
               throw "shipment missing from VM data"; // this should lead to a code fix
          }
    }
    The two approaches achieve the same goal, I'm really just curious if one or the other is considered a better practice.

  6. #6
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    If at all possible, putting data in the VM is preferred. To check for existence, you can do as you are within the initViewModel but you can do that and type checking before you open the window also.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Similar Threads

  1. Replies: 2
    Last Post: 28 Oct 2013, 5:28 AM
  2. Contact data best practice
    By Johnbran in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 27 May 2013, 6:11 AM
  3. [best practice] Passing data in controlfunctions?
    By peterkuli in forum Sencha Touch 2.x: Discussion
    Replies: 5
    Last Post: 1 Mar 2012, 11:55 AM
  4. Best practice for requiring many files from local file system
    By jtb4x in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 10 Jan 2012, 7:40 AM
  5. how to set rails as server providing data?
    By tang9528 in forum Community Discussion
    Replies: 2
    Last Post: 18 Aug 2008, 11:57 PM

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
  •