MVVM Documentation accurate?

5 posts, 0 answers
  1. Kevin
    Kevin avatar
    9 posts
    Member since:
    Aug 2013

    Posted 18 Sep 2014 Link to this post

    I am confused with a few parts of the documentation. Please help me understand what I am missing..

    1) http://docs.telerik.com/kendo-ui/api/javascript/view#configuration-model
    <div id="app"></div>
    <script>
    var foo = { foo: "foo" }
    var view = new kendo.View('<span data-bind="text:foo"></span>', { model: foo });
    view.render($("#app"));
    </script>

    The documentation says that model takes an observable object. Why isn't foo a kendo observable?
    ie: var foo = kendo.observable({ foo: "foo" })


    2) http://docs.telerik.com/kendo-ui/framework/spa/view#mvvm-bound-view-with-an-evaluated-template

    MVVM Bound view with an evaluated template
    <script id="index" type="text/x-kendo-template">
    #: foo #
    <div>Hello <span data-bind="text:foo"></span>!</div>
    </script>

    <script>
    var model = kendo.observable({foo: "World"});
    var index = new kendo.View('index', {model: model});
    </script>

    Why isn't index constructed with the evalTemplate option set to true?:
    var index = new kendo.View('index', {model: model}, evalTemplate: true);










  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 22 Sep 2014 Link to this post

    Hello Kevin,

    1) If the object that you pass as model is not an observable one, the bind method will internally initialize observable object out of it.

    2) I do not understand the question - by default that evalTemplate option is set to false:

    http://docs.telerik.com/kendo-ui/api/javascript/view

    It would be a breaking change if we modify the default behavior.

    Kind Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kevin
    Kevin avatar
    9 posts
    Member since:
    Aug 2013

    Posted 22 Sep 2014 in reply to Petur Subev Link to this post

    1) If it internally makes it a non-observable an observable can you help me understand what I did wrong in the code snippet below?
    I assumed I would need:
    var model=kendo.observable({foo: "World"});

    http://dojo.telerik.com/eCUd

    2) I know that evalTemplate is false by default and that is exactly the point I am making. I apologize for dragging this out, but I need to clarify this to make sure that I am not doing things incorrectly. The title of the section is "MVVM Bound View with an evaluated template" and then a code snippet is provided that APPEARS to NOT show an example of how to bind a view and evaluate a template. I am trying to be polite by assuming I am incorrect which is why I posed this as a question and didn't come say "your documentation is incorrect". The examples in the link you provided are nice and appear to be complete, but I am questioning the SPA section of documentation.

    I'm sorry the question wasn't clear, but if you do the following you should be able to understand what I am trying to say:

    Step 1) Click the link I provided
    Step 2) Read the title and note that it says "MVVM Bound View with an evaluated template"
    Step 3) Read the code snippet immediately below the title
    Step 4) Initially determine if the code snippet is an example of an MVVM Bound View with an evaluated template
    Step 5) Verify that the code snippet is an example of an MVVM Bound View by going to Kendo Dojo which you can find at dojo.telerik.com and paste in the code snippet and click "Run"
    Step 6) Realize that the code doesn't actually do anything and that you need to add more code to have a working example
    Step 7) Go to the link here that uses the code snippet from step 6, but then renders the view
    dojo.telerik.com/OJEj/2
    Step 8) Click "run"
    Step 9) Determine if the results are what you would expect if you rendered an MVVM Bound View with an evaluated template
    Step 10) Go to the link here that uses the code snippet from step 6, but with "evalTemplate: true" and renders the view
    dojo.telerik.com/agaZ
    Step 11) Determine if the results are what you would expect if you rendered an MVVM Bound View with an evaluated template
    Step 12) Reply and let me know if the documentation is incorrect or if I am wrong and the code snippet, as is, is a correct example
  4. Kevin
    Kevin avatar
    9 posts
    Member since:
    Aug 2013

    Posted 22 Sep 2014 in reply to Kevin Link to this post

    Also, can you help me understand:

    Hello Kevin,

    1) If the object that you pass as model is not an observable one, the bind method will internally initialize observable object out of it.

    http://docs.telerik.com/kendo-ui/framework/mvvm/observableobject

    If the View-Model object is going to be used after initialization (before or after calling kendo.bind) the kendo.observable method or new kendo.data.ObservableObject must be used.

    If the View-Model object is not going to be used after declaration you can define it as a regular JavaScript object. The kendo.bind method will not convert the original View-Model object to kendo.data.ObservableObject. This is why the following will not work:

    var viewModel = {
       name: "John Doe"
    };

    kendo.bind(document.body, viewModel);

    /*
    The following statement  will fail because the View-Model
    is not an instance of kendo.data.ObservableObject.
    */
    viewModel.set("name", "Jane Doe");
  5. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 24 Sep 2014 Link to this post

    Hello Kevin,

    apologies for the misunderstanding and thank you for pointing this out. You are correct, the example in question is incorrect (most likely we copy pasted it from above and overlooked it). I pushed an update, it should be online soon.

    Regarding your second question: the behavior described in the documentation is more or less a short-hand "convenience" one. In case you are confused by it, you should always stick to declaring your view models using the kendo.observable factory method:

    var viewModel = kendo.observable({ foo: "Foo" });

    Please let me know in case you need further help with the topic. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top