locked
Hub Control Databinding

    Question

  • Hi,

    I'm building an app with WinJS and I need to data bind the Hub Sections of a Hub control because the sections are determined by a service call. Is this possible? Thanks.

    kenji

    Wednesday, June 11, 2014 9:28 PM

Answers

  • Seems like there's no way to databind it so I'm just creating the sections programmatically, something like this:

    var landingHub = this._layoutRoot.querySelector("#landing-hub").winControl;
    
    var section = document.createElement("div");
    
    var hubSection = new WinJS.UI.HubSection(section, {
                                    header: 'header',
                                    isHeaderStatic: true
                                });
    landingHub.sections.push(hubSection);

    • Marked as answer by kogi2 Thursday, June 12, 2014 1:16 PM
    Thursday, June 12, 2014 1:16 PM

All replies

  • Seems like there's no way to databind it so I'm just creating the sections programmatically, something like this:

    var landingHub = this._layoutRoot.querySelector("#landing-hub").winControl;
    
    var section = document.createElement("div");
    
    var hubSection = new WinJS.UI.HubSection(section, {
                                    header: 'header',
                                    isHeaderStatic: true
                                });
    landingHub.sections.push(hubSection);

    • Marked as answer by kogi2 Thursday, June 12, 2014 1:16 PM
    Thursday, June 12, 2014 1:16 PM
  • Nice to see the shared solution.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, June 16, 2014 9:56 AM
    Moderator
  • The WinJS.UI.Hub.sections is a WinJS.Binding.List. That's why when you push your section to the hub .sections list you see the change in HTML.

    Similar I would think that you can just easily let your hubs .section point to your WinJS.Binding.List that you fill from your service with HubSections like this:

    landingHub = this._layoutRoot.querySelector("#landing-hub").winControl;
    landingHub.sections = mySections = new WinJS.Binding.List()
    
    WinJS.xhr("callmyserver").then (result) {
    
      for item in result.jsonelements {
    
        mySections.push(createHubSectionFromResultItem(item);
    
      }
    
    }



    • Edited by pkursawe Monday, June 16, 2014 11:02 AM
    Monday, June 16, 2014 11:02 AM