locked
data binding initializers: they receive arrays dor the properties?

    Question

  • Hello guys.

    stupid question: if the initializer function used in a binding can only receive one property (at least, I couldn't find a way to pass it several properties and corresponding values), why does it keep receiving arrays for origin and destination properties (second and fourth arguments of the array)?

    one more question: why is this an initializer and not a converter??? I mean, it should be called whenever the value of source changes and not only during initialization!

    and bear with me: why does the binding no longer updates the value after using an initializer? Btw, heres the code I'm using.

    markup:

    <div id="informacao" data-win-bind="innerHTML: nome Livro.conversor"></div>
    <button>Muda nome para Pedro</button>

    javascript:

    (function () {
        "use strict";

        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();
        var dados = WinJS.Binding.as({ nome: "Luis", morada: "Funchal" });
        app.onactivated = function (args) {
            WinJS.Utilities.query("button").listen("click", forcaMudancaNome);
            args.setPromise(
                WinJS.Binding.processAll(
                    document.getElementById("conteudos"),
                    dados, 
                    true, 
                    false)
                );
        };
        function forcaMudancaNome() {
            dados.nome = "Pedro";
        }
        function alteraNome(fonte, propsOrigem, destino, propsDestino) {
            destino.innerHTML = fonte.nome + " - " + fonte.morada;
        }
        WinJS.Utilities.markSupportedForProcessing(alteraNome);
        WinJS.Namespace.define("Livro", { conversor: alteraNome });

        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };

        app.start();
    })();

    notice that removing the binding initializer does indeed update the contents of the div


    Luis Abreu



    Monday, June 11, 2012 8:17 PM

All replies

  • Hi Luis,

    1.  Converters will work on the data that is bound to the element.

    2.  You cannot pass arrays

    Did that answer your questions?

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, June 14, 2012 5:54 PM
    Moderator
  • Hello Jeff.

    After my initial post, I've noticed that you've got initializers and converters (not mentioned in the quickstarts, which only show initializers).

    1. yes, understood

    2. ok, but why does it expect an array then?

    btw, I really don't understand why there's a need to distinguish between initializers and converters. Shouldn't we just have converters?

    Another thing I don't understand: why does binding propagation stop when I add an initializer to the data binding expression in markup? this makes no sense

    last question: why doesn't a converter function receives a reference to the object that is being used as source of the data binding?

    thanks


    Luis Abreu

    Thursday, June 14, 2012 8:21 PM
  • Jeff?

    Luis Abreu

    Wednesday, June 27, 2012 2:23 PM
  • Anyone??

    Luis Abreu

    Monday, July 02, 2012 8:35 PM
  • Luis,

    I have not had time to really drill into this.  You can definately answer this for yourself however.  Binding is all accomplished in base.js so you can debug and go through the parser in that file to see the logic.

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, July 03, 2012 2:24 PM
    Moderator
  • Jeff, what about the "design" questions?

    For instance, are there any justifications for these ones:

    1. why do we need to distinguish between converters and initializers?

    2. why don't converters receive the same parameters as an initializer? This one seems to be a huge limitation...


    Luis Abreu

    Friday, July 06, 2012 1:14 PM
  • I thought you were communicating with Chris on this are you not?

    Jeff Sanders (MSFT)

    Friday, July 06, 2012 1:19 PM
    Moderator
  • Hello Jeff.

    not really. he helped me understand what's going on with the then vs done exception discrepancy.

    Do you have an answer to theses questions? The converters (and data binding in general) don't really match the same features provided by C# and XAML...

    thanks.


    Luis Abreu

    Friday, July 06, 2012 5:31 PM
  • I have an answer but haven't had time to process it.  Perhaps this is enough to get you going however:

    You can use “this” as a keyword in the binding, and then the initializer (or converter) will only receive the entire source object, not any particular property. So you probably want something like this:

    <div id="informacao" data-win-bind="innerHTML: this myConcatConverter" />

    And then you would have to write the concatConverter to navigate through through the source object and do the right things.

    I have not had time to apply this to your sample however to test it out!

    -Jeff


    Jeff Sanders (MSFT)

    Friday, July 06, 2012 6:06 PM
    Moderator
  • HEllo Jeff.

    This is what I'm looking for. I'll give it a go when I'm on my PC.

    thanks.


    Luis Abreu

    Friday, July 06, 2012 6:21 PM
  • Hello again Jeff.

    it does not work. when you pass this, the function you pass is used as an initializer.

    To test this, I've got the following HTML:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>conversores</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

        <!-- conversores references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <h1>Uso de conversores</h1>
        <div id="conteudos">        
            <div id="informacao" data-win-bind="innerHTML: nome Livro.outroConversor"></div>
            <div id="informacao2" data-win-bind="innerHTML: this Livro.outroConversor2"></div>
            <button>Muda nome para Pedro</button>
        </div>    
    </body>
    </html>

    And here's the JS code I'm using:

    (function () {
        "use strict";
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        WinJS.strictProcessing();
        var dados = WinJS.Binding.as({ nome: "Luis", morada: "Funchal" });
        app.onactivated = function (args) {
            WinJS.Utilities.query("button").listen("click", forcaMudancaNome);
            args.setPromise(
                WinJS.Binding.processAll(
                    document.getElementById("conteudos"),
                    dados, 
                    true, 
                    false)
                );
        };
        function forcaMudancaNome() {
            dados.nome = "Pedro";
        }
        function alteraNome(fonte, propsOrigem, destino, propsDestino) {
            destino.innerHTML = fonte.nome + " - " + fonte.morada;
        }
        WinJS.Utilities.markSupportedForProcessing(alteraNome);
        function converteNome(nome) {
            return "[" + nome + "]";
        }
        function processaDados(obj) {
            return obj.nome + " - " + obj.morada;
        }
        WinJS.Namespace.define("Livro", {
            conversor: alteraNome,
            outroConversor: WinJS.Binding.converter(converteNome),
            outroConversor2: WinJS.Binding.converter(processaDados)
        });   
        app.start();
    })();

    Clicking over the button refreshes the info shown by the first div, but not my the second.


    Luis Abreu

    Monday, July 09, 2012 10:22 AM
  • Hello Abreu,

    Have you been able to resolve this issue yet?

    I don't normally ask questions here, but I'm really getting tired of all the quirkiness in WinJS. I'm having this exact same problem among many others.

    For me, the interesting thing is that I know my converter gets called whenever the source property changes, and yet the data-bound element does not change its property. When I remove the converter and just bind directly, everything works. This is not a limitation, it is a BUG, and the earlier they fix tis and many other "limitations", the better it will be for us all who are trying to develop some real world stuff with WinJS .

    Friday, August 17, 2012 1:06 AM