locked
WinJS.Binding.Template - parsing linebreaks in strings

    Question

  • Hy, 

    I created a WinJS.UI.FlipView to show the user a collection of messages.  The messages are simple strings with "\n" linebreaks. 

    After rendering through WinJS.UI.processAll() is every linebreak replaced through:

    <br></br>

    except for the linebreaks in the first message. They are just removed but not replaced. 

    Is this a bug? Can anyone confirm this behaviour?

    Greetings, 

    Fabian

    Thursday, July 26, 2012 2:43 PM

Answers

  • Hi Robo,

    I would use innerHTML if you intend to set HTML:

      <div data-win-control="WinJS.Binding.Template" id="template">
            <div data-win-bind="innerHTML:message" ></div>
        </div>
        <div data-win-control="WinJS.UI.FlipView" data-win-options="{itemDataSource: MyApp.messages.dataSource, itemTemplate: select('#template') }">
        </div>


        var messages = new WinJS.Binding.List([
                        { message: "First String with <br> linebreaks <br> inside." },
                        { message: "Second string with <br> linebreaks <br> inside." }
        ]);

    I will also file a bug against your original code in the event someone else runs up against this!

    Thanks,

    -Jeff


    Jeff Sanders (MSFT)

    Friday, July 27, 2012 12:07 PM
    Moderator

All replies

  • Can you post a simple repro?

    Jeff Sanders (MSFT)

    Thursday, July 26, 2012 3:11 PM
    Moderator
  • Here a simple example to place in an empty template project:

    default.html:

    <body>
        <div data-win-control="WinJS.Binding.Template" id="template">
            <div data-win-bind="innerText:message" ></div>
        </div>
        <div data-win-control="WinJS.UI.FlipView" data-win-options="{itemDataSource: MyApp.messages.dataSource, itemTemplate: select('#template') }">
        </div>
    </body>

    and the data in a extra data.js :

    (function () {
        "use stict";
        var messages = new WinJS.Binding.List([
                        { message: "First String with \n linebreaks \n inside." },
                        { message: "Second string with \n linebreaks \n inside." }
        ]);
        WinJS.Namespace.define("MyApp", {
            messages: messages
        });
    })();

    The first message appears without any linebreaks. The linebreaks in the second message are replaced through br elements.

    Thank you for helping.

    Thursday, July 26, 2012 4:04 PM
  • maybe , you should use <br/> in the message object , not \n . the charactor '\n'  is always used in other OO program language, such as C++,Java,C# ,etc.

    In html , '<br/>' means a new line , not the '\n'.

    Friday, July 27, 2012 1:44 AM
  • Thats a point.

    But html tokens will be escaped by the binding engine because of security reasons. 

    Friday, July 27, 2012 5:46 AM
  • It really works as you said when i try your demo code .

    I do not see any about this question or 'bug' , maybe it is a bug as you said .

    Friday, July 27, 2012 6:36 AM
  • Thanks Robo,

    I would use innerHTML instead of innerText:

    <div data-win-control="WinJS.Binding.Template" id="template">

    <div data-win-bind="innerHTML:message" ></div>

    </div>

    <div data-win-control="WinJS.UI.FlipView" data-win-options="{itemDataSource: MyApp.messages.dataSource, itemTemplate: select('#template') }">

    </div>

    var messages = new

    WinJS.Binding.List([

    { message:

    "First String with <br> linebreaks <br> inside." },

    { message:

    "Second string with <br> linebreaks <br> inside." }


    Jeff Sanders (MSFT)

    Friday, July 27, 2012 12:05 PM
    Moderator
  • Hi Robo,

    I would use innerHTML if you intend to set HTML:

      <div data-win-control="WinJS.Binding.Template" id="template">
            <div data-win-bind="innerHTML:message" ></div>
        </div>
        <div data-win-control="WinJS.UI.FlipView" data-win-options="{itemDataSource: MyApp.messages.dataSource, itemTemplate: select('#template') }">
        </div>


        var messages = new WinJS.Binding.List([
                        { message: "First String with <br> linebreaks <br> inside." },
                        { message: "Second string with <br> linebreaks <br> inside." }
        ]);

    I will also file a bug against your original code in the event someone else runs up against this!

    Thanks,

    -Jeff


    Jeff Sanders (MSFT)

    Friday, July 27, 2012 12:07 PM
    Moderator