locked
How to bind backbone.JS collection for windows8 listview control

    Question

  • Hi Team,

    Below is the code

    I am binding backbonejs collections to listview control using metrbone datasource but output is not displaying any listview control.please,can you suggest me where is the problem 

    default.html

    ------------

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

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
        <script src="/js/jquery-2.0.0.js"></script>
        <script type="text/javascript" src="/js/json2-min.js"></script>
        <script type="text/javascript" src="/js/underscore-1.4.4.js"></script>
        <script type="text/javascript" src="/js/backbone-1.0.0.js"></script>
        <!-- STACKMOB JS -->
        <script src="js/metrobone.js" type="text/javascript"></script>
         <script type="text/javascript" src="/js/stackmob-js-0.9.2.js"></script>
        
        <!-- BackbonejSSample references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <!-- Your data file. -->
        <script src="/js/test.js"></script>
        

    </head>
    <body>
        <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
            <div style="width: 150px; height: 100px;">

                <!-- Displays the "picture" field. -->
                <img src="#" style="width: 60px; height: 60px;"
                     data-win-bind="alt: title; src: picture" />
                <div>

                    <!-- Displays the "title" field. -->
                    <h4 data-win-bind="innerText: title"></h4>

                    <!-- Displays the "text" field. -->
                    <h6 data-win-bind="innerText: text"></h6>
                </div>
            </div>
        </div>

        <div id="basicListView" data-win-control="WinJS.UI.ListView"
             data-win-options="{itemTemplate: select('#mediumListIconTextTemplate')}">
        </div>
        <p>Content goes here</p>

    </body>
    </html>

    default.js

    -----


    /// <reference path="backbone-1.0.0.js" />
    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
        WinJS.Binding.optimizeBindingReferences = true;
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
        StackMob.init({
            publicKey: "ef5337b7-1d0c-489f-a68a-dcaf4cb8e499",
            apiVersion: 0
        });

        var listvw = (function ($) {
            var Todo = Backbone.Model.extend({
                defaults: {
                    title: "Basic banana",
                    text: "Low-fat frozen yogurt",
                    picture: "images/60Banana.png"
                },
            });

            var Todos = Backbone.Collection.extend({
                model: Todo

            });

            var initialize = function () {

                var todos = new Todos(Todo);
                document.getElementById('basicListView').itemDataSource = Metrobone.proxyCollection(todos);
            }

            return { initialize: initialize };
        }(jQuery));

        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                    listvw.initialize();
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
            }
        };

        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();
    })();

    Vijay


    Wednesday, February 12, 2014 5:36 PM

Answers

  • Hi Vijay,

    Not sure how you read the data from collection in backbone.JS, I think you should ask code owner this question.

    But to bind the data to ListView is easy, take a look at the documentation: Quickstart: Adding a ListView

    You should be able to find how to define a data template for ListView and binding data to it in section: Connecting your data to the ListView

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    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.

    Thursday, February 13, 2014 3:29 AM
    Moderator