Is it ok to have nested View Models

[danparker276]

I just want to make sure i'm not doing anything wrong.  This seems to work fine.

So in my html/javascript spa (no mvc), I've got what's like a master page, loading content from an HTML file on each menu click.  Is it ok to bind a viewmodel under another div that has a binded view model?  I just want to make sure.  You guys should set up a SPA example with this type of format, with a menu loading different content.

<div id="divMaster">

     Kendo Menu Here With clicks to fill content...

     <div id="divContent"></div>

</div>

 

<script>
$(document).ready(function () {


   kendo.bind(divMaster, app.masterService.viewModel);
}

</script>

function clickAbout() {
    $('#divContent').load('/Content/About.html #about');
    location.hash = "#about";
}
function clickHome() {
    $('#divContent').load('/Content/Home.html #home');
    location.hash = "#home";

Here's the Home, About is similar

<script src="/scripts/home.viewmodel.js"></script>
<script>
    $(document).ready(function () {
        var divHome = $("#divHome");
        kendo.bind(divHome, app.homeService.viewModel);

    });
</script>
<div id="divHome">
    Home Page
    <br />
    <input id="txtHomelbl" data-bind="value: testText" />
</div>

[Kiril Nikolov]

Hello Dan,

In general binding nested elements to different viewModels is not recommended. While it will work in your simple scenario, we cannot guarantee that it is going to work in a more complex project. However if your project is simple enough and the binding works, then you can keep it.

Regards,
Kiril Nikolov
Telerik

 

 

[gajendra]

Hi,

 I am also facing similar issue, while using nested view model, the nested view model's property (IsVisible) get bind to the control's property(visible) and on click of button, I am changing the value of property (IsViewMoreLinkVisible) to false and it's not notifying to bind controls but if I create a computed property of property(IsViewMoreLinkVisible) then it's working fine.

 Is it kendo bug or something I am doing wrong?

ProductDetailViewModel: kendo.observable({

ProductOverview: kendo.observable({
            IsViewMoreLinkVisible: false,
            ShowHideViewMoreLink: function () {
                return this.get('IsViewMoreLinkVisible');
            },
            Events: {
                onViewMoreClick: function (e) {
                    $PCCorePD.ViewMoreProductNewsAndComm();
                }
            }
        })

})

 

thanks.

[Kiril Nikolov]

Hello gajendra,

It works in the following example, please check it out and let me know if manage to reproduce the issue:

http://dojo.telerik.com/UmAbU/3

Regards,
Kiril Nikolov
Telerik