locked
Binding repeaters other than ListView.

    Question

  • I was wondering if there was a repeater other than the Listview.. As it stands, it seems like my options are the the ListView (which I have issues with because of its click behavior, and other nit pick issues), or I can write my own databinding function that loops thru my collection, which isn't very MVVM or very "modern" as development practices go.

    Thanks

    Josh

    Thursday, December 15, 2011 7:55 PM

Answers

  • I hear you Josh!

    It is highly extensible as it is.  You can override any function.  For example you can define your own TogglePressed (of course you could add your own logic here:

    WinJS.UI._SelectionMode.prototype.togglePressed = function (add) {};
    

    Make sure you declare that in your page JS outside of the namespace so that it is global.

    Does that make sense?

    -Jeff


    Jeff Sanders (MSFT)
    Tuesday, December 20, 2011 8:44 PM
    Moderator

All replies

  • Hi Josh,

    You can customize click behavior and other things in the controls.  What are your issues?

    -Jeff


    Jeff Sanders (MSFT)
    Thursday, December 15, 2011 8:50 PM
    Moderator
  • Could you point me at the documentation or sample code for that?? I have looked over the API docs and all the samples... I even tried scanning the 17000 line uicollections.js file to figure it out.. But I gave up because that seemed like a bridge to far :-P... (for now)..

    As for my specific problem, I want my grid objects to scale for various screen resolutions.. To do that I need to move to em or % based layouts, which get really broken with that scaling click behavior that is there now.. I would prefer no UI behavior at all, as I am already planning an animation transition so I don't need a click behavior... I am sure if the Memories app source were available I could figure it out from there, because it has those two behaviors (scaling, and no click effect).. But its not, so I am left figuring it out from scratch :-P

    Thanks

    Josh

    Thursday, December 15, 2011 8:55 PM
  • Hi Josh,

    What are you trying to accomplish with the click behavior.  You don't want to be able to select the item?  I don't understand what 'scaling click behavior' is.  Can you give more information?

    -Jeff


    Jeff Sanders (MSFT)
    Friday, December 16, 2011 3:05 PM
    Moderator
  • Create a Grid layout project, start the app, press on a grid item.. Notice how it scales it down by about 10% when you click on it.. I don't want it to scale the selected item on click.. if I say tap: none, then I don't get an event that anything was selected, same with changing the selectionMode... want the item selection event so I know what people choose from the grid, however, I don't want your scaling behavior on press.

     

    Let me know if that helps explain it a bit more :-).

     

    Thanks

    Josh

    Friday, December 16, 2011 3:52 PM
  • Perfect explanation Josh!

    Yes you can prevent this.  This is a CSS style that you can easily override.  You can use the DOM Explorer to find what that style is.  I am not able to look at that myself currently but will look it up for you later if you cannot find it in the DOM Explorer.

    -Jeff


    Jeff Sanders (MSFT)
    Friday, December 16, 2011 3:55 PM
    Moderator
  • Actually, I just looked into this, and its not a CSS style we can override.. Its inserted as in line styling on click.. Below is the HTML when clicked

     

    <div role="option" tabIndex="0" aria-flowto="ms__id22_1" aria-posinset="0" aria-setsize="90" id="ms__id22_0" class="win-template win-item win-pressed" style="-ms-transition:null 167ms cubic-bezier(0.10, 0.90, 0.20, 1.00) 0ms; left: 120px; top: 48px; position: absolute; -ms-transform: scale(0.95);">
            <div class="largeTileTextTemplate">
                <div id="_win_bind33" class="largeTileTextTemplateBackground" style="background-color: rgba(209, 211, 212, 1);" data-win-bind="style.backgroundColor: backgroundColor"></div>
                <div class="largeTileTextTemplateOverlay">
                    <div id="_win_bind34" class="largeTileTextTemplateLargeText" data-win-bind="textContent: title">0.0 ǺSed nisl nibh, eleifend posuere.</div>
                       <div id="_win_bind35" class="largeTileTextTemplateSmallText" data-win-bind="textContent: subtitle">Phasellus faucibus</div>
                </div>
            </div>
        </div>

     

    As you can see the click is inserting inline style that does the transition and the transformation style="-ms-transition:null 167ms cubic-bezier(0.10, 0.90, 0.20, 1.00) 0ms; left: 120px; top: 48px; position: absolute; -ms-transform: scale(0.95);"

    The upside is, I guess, I can start churning thru the API javascript for the Grid control and see if I can find that style being applied.. But as it is written, we can not override the tap visual behavior..

    Given how this is the only repeater control in the framework, I would consider this an issue, as being allowed to override a visual behavior is pretty crucial to developing branded custom user experiences.

     

    Josh Handel

    Tuesday, December 20, 2011 2:09 PM
  • Yah for more digging, but boo, no work around inside the grid control..

     

    so I followed the code and followed it around a bit.. Depending on your definition of "culprit" It could either be in animations.js with pointerDown and pointerUp, both are the functions with the hard coded animation behaviors in them that get executed, or togglePressed in UICollections.js,  It is true that I can change the selection and tap modes to none and the the grid would just repeat, but I would also loose the grid tracking which item was pressed, I would have to code as click events into my templates. Which, at this point may be the only way to use the Grid control.  Of course there is also Knockout.JS, which could work for me as well..

     

    I am also open to hear other suggestions, but looks like that 95% scaling is both by design, and un-overrideable.  (granted I am no JS expert, maybe there is a way to override togglePressed in my own code?

    Josh

     

    Tuesday, December 20, 2011 2:27 PM
  • Ya, so the more I look at ListView, the more I am thinking its not the right answer to the problem.. I have [N] (1 to 20) items that I need to lay out in a horizontal scrolling layout.. I want a repeater control to do this.. But the ListView being written for a very specific navigation task, doesn't seem right for the job.. The user experience I am going for is akin to the Memories app..

     

    So I can see a few options.

    1) Knockout JS as my templeting and MVVM engine

    2) write my own repeater control...

    I would like to go with option 2 from a "cleanliness" perspective, but I haven't found (or understood) how to lookup and process a template from JavaScript.. On the upside, I have figured out how to create a namespace using the WinJS APIs and user controls (totally need to blog on that because its neither trivial or obvious right now, despite what the BUILD video on the topic suggests). so I guess I am headed in the right direction.. Any pointers on how to find, load, and bind a template would be awesome at this point.

     

    Josh

    Tuesday, December 20, 2011 2:44 PM
  • Hi Josh,

    You can definitely do any of the things you suggested.  The ListView is pretty powerful however.  This is especially true if you anticipate a lot of items.  If indeed you want to stick to 20 items, then perhaps you just coding this yourself is the best route.

    You can disable or change the behavior of togglePressed (or the other functions) directly by modifying the code yourself.  It is in a library but you import it into your application when you build it.

    -Jeff


    Jeff Sanders (MSFT)
    Tuesday, December 20, 2011 4:54 PM
    Moderator
  • I realize that as JavaScript I can just go in and re-write or tweak WinJS where ever I like.. However, is that really a best practice? if there isn't yet, maybe we should use this forum to determine the right way to extend or override WinJS.. For instance, I would never edit JQuery, I would override or extend it in a separate library..

     Just a thought, but given the path of this conversation, and the nature of "real world" development.. A good clean extension pattern is going to need to be figured out and evangelized otherwise we are going to have thousands of tweaked implementations of WinJS floating around.. And as a consultant, the idea that my client would just go directly tweak WinJS causes the hairs on the back of my head to standup.. Scary stuff from a code maintainability perspective.

    On the upside, thru this experience, I have figured out how to create a User Control, how to create a namespace, and how to create reusable libraries that are modeled after WinJS... so I've got 3 or 4 good blog articles I can write based on all of this learning :-P

    Josh

    Tuesday, December 20, 2011 7:03 PM
  • I hear you Josh!

    It is highly extensible as it is.  You can override any function.  For example you can define your own TogglePressed (of course you could add your own logic here:

    WinJS.UI._SelectionMode.prototype.togglePressed = function (add) {};
    

    Make sure you declare that in your page JS outside of the namespace so that it is global.

    Does that make sense?

    -Jeff


    Jeff Sanders (MSFT)
    Tuesday, December 20, 2011 8:44 PM
    Moderator