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

knockout 2 inline foreach template ?

12 Answers 330 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
feras
Top achievements
Rank 1
feras asked on 09 Mar 2012, 02:53 AM
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

12 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 09 Mar 2012, 08:43 AM
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!
0
feras
Top achievements
Rank 1
answered on 09 Mar 2012, 01:50 PM
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
0
Atanas Korchev
Telerik team
answered on 09 Mar 2012, 01:56 PM
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!
0
feras
Top achievements
Rank 1
answered on 09 Mar 2012, 02:13 PM
thank you
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 07 May 2012, 02:31 PM
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
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 07 May 2012, 06:53 PM
...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?
0
Atanas Korchev
Telerik team
answered on 08 May 2012, 07:35 AM
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!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 08 May 2012, 01:47 PM
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?
0
Atanas Korchev
Telerik team
answered on 08 May 2012, 02:31 PM
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!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 08 May 2012, 02:36 PM
Thats what I thought, but how is that different from my original fiddle?

http://jsfiddle.net/stevescotthome/5MYEe/
0
Atanas Korchev
Telerik team
answered on 08 May 2012, 02:44 PM
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!
0
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
answered on 08 May 2012, 02:50 PM
Ahhh, I see...well I'm going to spend today gutting knockout and replacing it with Kendo, thanks Atanas :)
Tags
MVVM
Asked by
feras
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
feras
Top achievements
Rank 1
sitefinitysteve
Top achievements
Rank 2
Iron
Veteran
Share this question
or