This is a migrated thread and some comments may be shown as answers.

Is it ok to have nested View Models

3 Answers 152 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
danparker276
Top achievements
Rank 2
danparker276 asked on 30 May 2014, 04:45 PM
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>

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 02 Jun 2014, 12:09 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
gajendra
Top achievements
Rank 1
answered on 27 May 2015, 01:33 PM

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.

0
Kiril Nikolov
Telerik team
answered on 29 May 2015, 06:11 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
MVVM
Asked by
danparker276
Top achievements
Rank 2
Answers by
Kiril Nikolov
Telerik team
gajendra
Top achievements
Rank 1
Share this question
or