knockout 2 inline foreach template ?

13 posts, 0 answers
  1. feras
    feras avatar
    24 posts
    Member since:
    Sep 2008

    Posted 08 Mar 2012 Link to this post

    Hi,
    i am evaluating Kendo and it looks fantastic, we use knockout, and i have noticed that kendo MVVM is almost the exact of knockout, but one thing i like about kockout is that you don't have to use java script block to define for-each templates, you just do it in the markup, so is this possible with kendo ?

    thanks in advanced
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 09 Mar 2012 Link to this post

    Hi,

     You can use the source binding and a template to do the same. This example shows how.

    Greetings,
    Atanas Korchev
    the Telerik team
    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. feras
    feras avatar
    24 posts
    Member since:
    Sep 2008

    Posted 09 Mar 2012 Link to this post

    thank you ,
    but this is the exact opposite of what i mentioned

    i dont want this
    <script id="row-template" type="text/x-kendo-template">
       
    <tr>
           
    <td data-bind="text: name">
           
    </td>
            <td>
                #: kendo.toString(get("price"), "C") #
            </
    td>
           
    <td data-bind="text: unitsInStock"></td>
       
    </tr>
    </script>

    i want this
    http://knockoutjs.com/documentation/foreach-binding.html
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 09 Mar 2012 Link to this post

    Hi,

     This is not supported by Kendo MVVM. Using the template and the source binding is the way to work with repeating data.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. feras
    feras avatar
    24 posts
    Member since:
    Sep 2008

    Posted 09 Mar 2012 Link to this post

    thank you
  7. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 07 May 2012 Link to this post

    I'd like to throw a vote behind adding a foreach binding...its just a much nicer way to define the repeater in the markup
  8. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 07 May 2012 Link to this post

    ...actually...I don't think this even works in a marginally complex scenario (on top of being crazy hard to look at)

    jsfiddle

    ...am I just doing it wrong?
  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 May 2012 Link to this post

    Hi,

     What does not work? What is the expected outcome? Could you elaborate a bit?

    Greetings,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 08 May 2012 Link to this post

    It's a set of nested arrays...but it only ever ends up binding the first item.  Hamilton should have 3 sites attached to the one rotation (for example), not just the one as shown.

    So lets remove the nesting from it and just try and show the root campuses array
    http://jsfiddle.net/stevescotthome/VeyLC/1/

    It knows there should be 3 items, but the one is just blank...should render Hamilton, Waterloo, Niagara...but its just rendering Hamilton, Niagara, <empty>

    So the question is that do we need to do a manual for loop inside the template as well...and if so then we'd lose the data-bind syntax wouldn't we?
  11. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 May 2012 Link to this post

    Hello,

     I guess then that you can just use nested templates and source bindings like this: http://jsfiddle.net/korchev/SgLsB/2/ 

    Kind regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 08 May 2012 Link to this post

    Thats what I thought, but how is that different from my original fiddle?

    http://jsfiddle.net/stevescotthome/5MYEe/
  13. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 08 May 2012 Link to this post

    Hi,

     The problem is that a template should have only one root tag when used together with the source binding. Kendo MVVM needs to map one DOM element to one item from the array which is specified as the source binding. In your case you have more than one root element in the template. Wrapping the whole template in a div solves the problem: http://jsfiddle.net/korchev/5MYEe/13/ . We will add this to the documentation of the source binding.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 08 May 2012 Link to this post

    Ahhh, I see...well I'm going to spend today gutting knockout and replacing it with Kendo, thanks Atanas :)
Back to Top
Kendo UI is VS 2017 Ready