How to transform this code to MVVM?

[Joonu]

I have some working code which I am trying to convert to use the MVVM pattern. My code looks like the following:

To start with, I have a div tag like the following:

<div id="MyDiv" data-template="template" ></div>

My template looks like the following:

<script type="text/x-kendo-template" id="template">
        <table>
            <tr>
                <td>My Numbers: </td>
                #for (var i = 0; i < data.length; i++){#
                    <td><input type="text" value=#= data[i] # /></td>
                #}#
            </tr>
        </table>
</script>

Finally the following script provides data to the template:

<script>
    var rowTemplate = kendo.template($("#template").html());
    function display() {
        $("#MyDiv").html(rowTemplate({
            data: ["1.2", "2.3", "3.4"]
        }));
    }

    display();
</script>

When I run, the output shows the numbers 1.2, 2.3 and 3.4 in 3 inputboxes (each of which appears in 3 separate <td> tags) against a label, like the following:

My Numbers:     1.2     2.3     3.4

I have been trying to convert the above code to an MVVM pattern, but somewhy not getting it right. Could someone please guide me how to do this correctly?

[Alexander Valchev]

Hello Joonu,

The following examples illustrates how the code would look like using the MVVM pattern.

• http://jsbin.com/isatoz/2/edit

The sample uses source binding, for more information please check this help topic as well as the corresponding demo.

All the best,
Alexander Valchev
the Telerik team

[Joonu]

The example you have attached displays the numbers in 3 <tr/> s, one on top of the other. I need them to display in 3 <td/> s, side by side, just as my working code renders them.

Any ideas how I could do it using MVVM and template binding? Any help with this would be greatly appreciated.

Edit:

I figured it out! Here's what to do:

Change the code in the div tag to:

    <div id="MyDiv" >
      <table>
        <tr>
          <td>My Numbers: </td>
          <td data-template="template" data-bind="source: data"></td>
        </tr>
      </table>
    </div>

And then change the template script to:

    <script type="text/x-kendo-template" id="template">
      <input type="text" data-bind="value: foo"/>
    </script>

That would display the numbers in 3 separate <td/> s of their own (or at least it looks like that!)

Edit again:

The idea I suggested does not put the 3 input textboxes into 3 separate <td/> s. Instead it puts them all into 1 <td/>. My requirement is the former. Could you please guide me on how to get them into 3 separate <td/> s? Thanks in advance.

[Alexander Valchev]

Hello Joonu,

The idea of source and template binding is to automatically render and bind the template for each data item from the source. To render <td> elements inside a single row, you can bind that specific row:

<table id="MyDiv">
  <tr data-template="template" data-bind="source: data"></tr>
</table>
<script type="text/x-kendo-template" id="template">
  # if(foo != "") { #
    <td><input type="text" data-bind="value: foo"/></td>
  # } else { #
    <td>My Numbers:</td>
  # } #
</script>

I also updated the previous example: http://jsbin.com/isatoz/20/edit

Kind regards,
Alexander Valchev
the Telerik team