locked
Selected option value is not shown when it is generated with WinJS.Binding.Template

    Question

  • Hi.

    This problem happens only when the selected option is at the last position.
    The option value is not shown first, but when it is clicked, the value is shown.

    home.html

    <section aria-label="Main content" role="main">
        <select id="template" data-win-control="WinJS.Binding.Template">
            <option data-win-bind="selected: selected; textContent: content"></option>
        </select>
        <select id="select"></select>
    </section>

    home.js

    (function () {
        "use strict";
    
        WinJS.UI.Pages.define("/pages/home/home.html", {
            ready: function (element, options) {
                var values = [
                    { selected: false, content: "aaa" },
                    { selected: false, content: "bbb" },
                    { selected: false, content: "ccc" }
                ];
                var template = element.querySelector("#template").winControl;
                var select = element.querySelector("#select");
    
                values.forEach(function (value, i) {
                    if (i === values.length - 1) { // select the last option
                        value.selected = true;
                    }
                    template.render(value, select);
                });
            }
        });
    })();


    Any ideas?

    Thanks.

    Saturday, June 30, 2012 2:14 AM

Answers

  • Hi

    Of course it support WinJS.Binding.Template.

    As you said if the option is not the last element in that array, it can be display rightly.

    Your question here is why : "when the selected option is at the last position.

    The option value is not shown first, but when it is clicked, the value is shown."

    Actually I haven't found the reason.. It's a odd behavior.  I'll do more investigate and update this next week.

    And I suggest you use my solution for a simple data array.

    Update: I send this issue to dev team, they will follow up this issue.



    Friday, July 6, 2012 3:17 AM

All replies

  • I put similar code in a blank application and it works fine (the list box is displaying 'CCC').

    Are you using the Release Preview? 


    Jeff Sanders (MSFT)

    Monday, July 2, 2012 1:54 PM
    Moderator
  • Yes, I'm using the Release Preview.
    I can reproduce in a navigation project template. 

    The list box isn't displaying 'CCC' at first.

    list_box_before_clicking

    When the list box is clicked, 'CCC' is shown.

    list_box_after_clicking

    Tuesday, July 3, 2012 2:25 AM
  • Hi

    You can try this:

    HTML:
     <section aria-label="Main content" role="main">
        <select id="template" data-win-control="WinJS.Binding.Template">
            
        </select>
        <select id="select"></select>
    
    JS:
    (function () {
        "use strict";
    
        WinJS.UI.Pages.define("/html/home.html", {
            ready: function (element, options) {
                var values = [
                    { selected: false, content: "aaa" },
                    { selected: false, content: "bbb" },
                    { selected: false, content: "ccc" }
                ];
                var template = element.querySelector("#template").winControl;
                var select = element.querySelector("#select");
    
    
                values.forEach(function (value, i) {
                    var newOption=document.createElement("option");
                    newOption.text = value.content;
                    if (i==values.length-1) {
                        newOption.selected=true;
                        }
                    select.add(newOption);
                });      
            }
        });
    })();
    Hope it helpful.
    • Proposed as answer by Dino He Thursday, July 5, 2012 8:50 AM
    • Unproposed as answer by toshihiro.nakamura Thursday, July 5, 2012 12:39 PM
    Thursday, July 5, 2012 8:50 AM
  • Thank you for your reply, Dino.

    Your solution works fine.
    But it doesn't use WinJS.Binding.Template.

    I'd like to know that generating option elements with WinJS.Binding.Template is supported or not. 

    If it's not supported, I'll use your solution.

    Thanks.

    Thursday, July 5, 2012 12:38 PM
  • Hi

    Of course it support WinJS.Binding.Template.

    As you said if the option is not the last element in that array, it can be display rightly.

    Your question here is why : "when the selected option is at the last position.

    The option value is not shown first, but when it is clicked, the value is shown."

    Actually I haven't found the reason.. It's a odd behavior.  I'll do more investigate and update this next week.

    And I suggest you use my solution for a simple data array.

    Update: I send this issue to dev team, they will follow up this issue.



    Friday, July 6, 2012 3:17 AM
  • Hi

    Thank you, Dino.
    I'll use your solution.
    Friday, July 6, 2012 6:02 AM