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

How to transform this code to MVVM?

3 Answers 49 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Joonu
Top achievements
Rank 1
Joonu asked on 26 Nov 2012, 04:39 PM

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?

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 29 Nov 2012, 08:33 AM
Hello Joonu,

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

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joonu
Top achievements
Rank 1
answered on 29 Nov 2012, 11:57 AM
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.
0
Alexander Valchev
Telerik team
answered on 04 Dec 2012, 08:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Joonu
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Joonu
Top achievements
Rank 1
Share this question
or