locked
using data-win-bind on root object RRS feed

  • Question

  • Hi All

    So my question is simple. Say I want to do a data binding for a template but I don't want to bind to specific property of an object, rather I'd like to bind to the root object. Using the data-win-bind in HTML how would one do that?

    I've got a workaround where I map my data using underscore but it changing my underlying data just so I can bind to it in this way doesn't seem like the best idea: 

    // here's how I map my data to a root key

    var myTrxns = _(args).map(function (transaction) { return { root: transaction }; });
    // now I can bind to it like this

    data-win-bind="value: root.amount.amount transactionCard.processAmount


    Monday, December 10, 2012 3:37 PM

Answers

  • Hi,

    You could use that as follow:

    <div id="boundDiv" data-win-bind="innerText: age; style.background: color"></div>
    <script type="text/javascript">
        var colorArray = ["red", "green", "blue"];
        var person = { age: 0, color: colorArray[0] };
        var span = document.getElementById("boundSpan");
        WinJS.Binding.processAll(span, person);
        var bindingPerson = WinJS.Binding.as(person);
    
        setInterval(function () {
            changeColor(bindingPerson);
         }, 500);
    
        var index = 0;
    
        function changeColor(p) {
            if (index > 2)
                index = 0;
            p.age = index++;
             p.color = colorArray[index];
        };
    </script>

    #data-win-bind property (Windows)

    http://msdn.microsoft.com/library/windows/apps/hh440968


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Tuesday, January 8, 2013 5:18 AM
    Tuesday, December 11, 2012 9:43 AM

All replies

  • Hi,

    You could use that as follow:

    <div id="boundDiv" data-win-bind="innerText: age; style.background: color"></div>
    <script type="text/javascript">
        var colorArray = ["red", "green", "blue"];
        var person = { age: 0, color: colorArray[0] };
        var span = document.getElementById("boundSpan");
        WinJS.Binding.processAll(span, person);
        var bindingPerson = WinJS.Binding.as(person);
    
        setInterval(function () {
            changeColor(bindingPerson);
         }, 500);
    
        var index = 0;
    
        function changeColor(p) {
            if (index > 2)
                index = 0;
            p.age = index++;
             p.color = colorArray[index];
        };
    </script>

    #data-win-bind property (Windows)

    http://msdn.microsoft.com/library/windows/apps/hh440968


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Tuesday, January 8, 2013 5:18 AM
    Tuesday, December 11, 2012 9:43 AM
  • ok, so this is weird, you used the incorrect ID by mistake in the the getElementById and it still works

    this also works:

    WinJS.Binding.processAll(null, person);

    Tuesday, December 11, 2012 12:32 PM