CODEWITHSUNDEEP
listviewmvvmkendo-uisingle-page-application
amp
amp

Reputation: 12352

Binding a viewmodel to a listview

I'm testing the single page application (SPA) and MVVM features of Kendo UI, but I'm having some problems to bind a Viewmodel to a listview which is the content of on of the pages...

What I have so far is:

<div id="app">
    <button data-bind="click: gotopage1">Page 1</button>
    <button data-bind="click: gotopage2">Page 2</button>
    <button data-bind="click: gotopage3">Page 3</button>
</div>

<script id="page1" type="text/x-kendo-template">
    <ul id="listView1" data-bind="source: photossource"></ul>
</script>

<script id="page2" type="text/x-kendo-template">
    //content of page 2
</script>

<script id="page3" type="text/x-kendo-template">
    //content of page 3
</script>

<script id="layout" type="text/x-kendo-template">
    <header></header><section id=content></section><footer></footer>
</script>

<script type="text/x-kendo-template" id="templatelistitem">
    <div class="item">
        <img data-bind="attr: { src: this }" />
    </div>
</script>
<script>
    var set1 = new Array();
    var set2 = new Array();
    var set3 = new Array();

    //fill the arrays... they are just strings to put on the `src` attribute of the `img`

    var appViewModel = new kendo.observable({
        gotopage1: function () {
            router.navigate("/");
    },
        gotopage2: function () {
            router.navigate("/page2");
    },
        gotopage3: function () {
            router.navigate("/page3");
    }
    });
    kendo.bind($("#app"), appViewModel);

    var pageViewModel = new kendo.observable({
        photossource: set1
    });

    var page1 = new kendo.View("#page1");
    var page2 = new kendo.View("#page2");
    var page3 = new kendo.View("#page3");

    var layout = new kendo.Layout("#layout");

    var router = new kendo.Router();

    router.route("/", function () {
        pageViewModel.photossource = set1;
        layout.showIn("#content", page1);
    });

    router.route("/page2", function () {
        pageViewModel.photossource = set2;
        layout.showIn("#content", page2);
    });

    router.route("/page3", function () {
        pageViewModel.photossource = set3;
        layout.showIn("#content", page3);
    });

    $(function () {
        router.start();
        layout.render($("#app"));
        layout.showIn("#content", page1);
    });

    $(document).ready(function () {
        $("#listView1").kendoListView({
            template: kendo.template($("#templatelistitem").html())
        });
        kendo.bind($("#listView1"), pageViewModel);
    });
</script>

I need to bind the pageViewModel to the listview1 of page1. This pageViewModel will be shared for the 3 pages.

This is giving me the following error:

Uncaught TypeError: Cannot read property 'parent' of undefined in
kendo.web.min.js:12

My main questions are:

Upvotes: 1

Views: 2345

Answers (2)

Vojtiik
Vojtiik

Reputation: 2560

Here is a JSFiddle solution without the exception, I believe the functionality as as you expected.

I changed quite few things and I am not saying all of the changes are necessary, but hopefully this example will lead you towards final solution.

1) views from template is done differently.( I did hard code.) 

 var index = new kendo.View('index');

2) listview for MVVM usage should be created in a following way

3) as already mentioned, you should use model.set(key,value) with your observables

pageViewModel.set("photossource", set1)

4) keep an eye at the order you are initializing controls

Upvotes: 3

Petyo Ivanov
Petyo Ivanov

Reputation: 1137

Using the Kendo UI View essentially eliminates the need to call kendo.bind. The recommended way is to assign a ViewModel to the view. Afterwards, you can populate its photossource field when necessary. By the way, any operations performed on the view model should be done via the set and get methods.

Upvotes: 2

Related Questions