List-view generated from data is not rendering

[James]

Hi!

I have a link which is typically a listview (can be a button too etc) that Kendo Mobile can't render its listview-look. I am querying data which contains the listview-link from the mobile's sqlite (synced from a remote CMS)

Here in an example code:

<div data-role="view" id="page-skade" data-title="" data-show="pageShow" data-model="pageViewModel">

        <h1 data-bind="text: title"></h1>

        <p data-bind="html: content"></p> <!-- THIS CONTENT IS QUERIED FROM SQLITE: CONTENT CONTAINS CORRECT FORMATED LISTVIEW LINK -->
</div>

Best regards,
James

[Alexander Valchev]

Hello James,

Direct replacement of the html or using the html binding will bypass widget initialization. Widgets will be build only if you use a source and template binding. You may source bind the paragraph to a non-array value or to the ViewModel itself. For you convenience I prepared a small example using this this approach in action. Please check it and let me know if it fits in your case.

• http://jsbin.com/iyakig/2/edit

Kind regards,
Alexander Valchev
the Telerik team

[James]

Hi Alexander!

Thanks for the reply. Basically it is a database related. We are using Wordpress as a Content Management System for the app. We sync data from it. The syncing works well both text and images.  I am storing them locally. 

The scenario: Our app editors  wants to have a freedom of linking to somewhere else, either internal or external. That is why I created a [shortcode] for the links that will return a properly formated linkview. Everything works fine until syncing to the mobile app and rendering them into a view as link but they can't render as listview. Same as button as well. 

Here is the js

function firstAidShow(e) {
    var id = e.view.params.id;
    var db = openDB();
    var data = [];
    db.transaction(function(tx) {
        tx.executeSql('SELECT * from firstaid WHERE id = ' + id, [],
            function(tx, result) {

                for (var i = 0; i < result.rows.length; i++) {
                    data[i] = result.rows.item(i);
                }
                firstAidViewModel.setValues.call(firstAidViewModel, id, data);
                kendo.init($("#page-firstaid"));
        });
    });
    e.view.scroller.reset(); // reset to page top
}

var firstAidViewModel = new kendo.observable({
    setValues: function(id, data) {
        var that = this;
        that.set("title", data[0].title);
        that.set("content", data[0].content);
    },
    title : "",
    content : ""
});

Here is the view

<div data-role="view" id="page-firstaid" data-title="First Aid" data-show="firstAidShow" data-model="firstAidViewModel" >

     

        <header data-role="header">

            <div data-role="navbar">

                <a class="nav-button" data-align="left" data-role="backbutton">Back</a>

                <span data-role="view-title"></span>

            </div>

        </header>

         

        <h2 data-bind="text: title"></h2>

        <div data-bind="html: content" id="content-forstehjelp"></div> <!-- Somewhere in this content is where the link generated from wp shortcode that needs to be rendered as listview or a button -->


</div>

Hope there is a solution for this.

best regards,
James

[Alexander Valchev]

Hello James,

Direct replacement of the html or using the html binding will bypass widget initialization.
I suggest you to use source binding with a template. As an example:

<div data-bind="source: this" data-template="tmp" id="content-forstehjelp"></div>

<script id="tmp" type="text/x-kendo-template">
    #= content #
</script>

In this way, widgets will be initialized every time when the "content" field changes.
I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team