Is it ok to have nested View Models

4 posts, 0 answers
  1. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 30 May 2014 Link to this post

    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>
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 02 Jun 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. gajendra
    gajendra avatar
    1 posts
    Member since:
    Jul 2013

    Posted 27 May 2015 in reply to Kiril Nikolov Link to this post

    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.

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 29 May 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready