locked
[HTML+JS] How to get ListView items as DOM elements? RRS feed

  • Question

  • I know that's easy to control listview - by array.

    But my listview items have inputs, checkboxes and radiobuttons. I want to read values from these inputs. But I can't get access to listview items and their inputs by getElementbyId/querySelector! These methods gives me no elements!

    How to receive input's value in listview item?


    ©KW

    Friday, July 31, 2015 8:09 AM

Answers

  • Hello Kenya-west,

    You can attach binding elements on the  click events the input in the template. For example.

     <div class="tileTemplate" data-win-control="WinJS.Binding.Template">
                        <div class="tileTempl ">
                            <h6 class="win-h6 counter" data-win-bind="innerText: counter"></h6>
                            <h1 class="letter win-h1" data-win-bind="innerText: letter"></h1>
                            <input type="text" value="" class="win-interactive" data-win-bind="innerText: letter;onchange:ontextchange"  />
                        </div>
                    </div>

    and in the databinding source the array you need to set it as function so when user change the text the event can be triggered. To support function as databinding you need to mark it as support for processing.

     // Generates a tile with a random letter and counter
        function generateTile() {
            var tile = {
                letter: letterSrc[Math.floor(Math.random() * letterSrc.length)],
                counter: tIndex,
                ontextchange: function (e) {
                  //your text change event;
                  //get the value using 
                  var value = e.target.value;
                  
                }
            };
    
            WinJS.Utilities.markSupportedForProcessing(tile.ontextchange);
    
            tIndex++;
            return tile;
        }

    Please see: WinJS.Utilities.markSupportedForProcessing function 

    Also Please see this : Declarative binding sample

    In the example The template control scenario shows you how to render the same user interface multiple times with different data by using a template control. WinJS binding templates let you specify the UI and binding once, then render the template itself multiple times for each set of data. This example renders the template control three times, bound to different data. When you change the data, the bindings fire to update the individual items that were rendered from the template.

    With Regards,

    Krunal Parekh


    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, August 3, 2015 2:56 AM