Hi all,
I have a view model with 2 array properties: "prices" and "pricesForStudents" (objects inside arrays are of the same structure):
var model = kendo.observable({<br> prices: [<br> { hours: 24, firstYear: 7500, advanced: 8200 }, { ... }<br> ],<br> pricesForStudents: [<br> { hours: 24, firstYear: 6000, advanced: 6300 }, { ... }<br> ],<br><br> ... other properties<br>});
I bind these 2 properties to 2 tables using templates, and I also have "Add" and "Remove" buttons.
I need to ensure each table has at least one row (each array has at least one element), so "Remove" button gets disabled, if the appropriate table contains only one row.
So, I introduced the following 3 methods in the ViewModel:
addPrice: function() {<br> this.get("prices").push({});<br>},<br>removePrice: function(e) {<br> this.get("prices").remove(e.data);<br>}<br>removePriceButtonEnabled: function() {<br> return this.get("prices").length > 1;<br>}
But since I have 2 arrays I need to repeat the same functions for the second array:
addPriceForStudents: function() {<br> this.get("pricesForStudents").push({});<br>},<br>removePriceForStudents: function(e) {<br> this.get("pricesForStudents").remove(e.data);<br>}<br>removePriceForStudentsButtonEnabled: function() {<br> return this.get("pricesForStudents").length > 1;<br>}
Both tables share the same template to display data:
<script id="regularPricing" type="text/x-kendo-template"><br> <tr><br> <td><input type="number" class="numerid-box single-line" data-bind="value: hours" data-role="numerictextbox" data-format="n0" /></td><br> <td><input type="number" class="numerid-box single-line" data-bind="value: firstYear" data-role="numerictextbox" data-decimals="2" /></td><br> <td><input type="number" class="numerid-box single-line" data-bind="value: advanced" data-role="numerictextbox" data-decimals="2" /></td><br> <td><button data-bind="enabled: removePriceButtonEnabled, click: removePrice" data-role="button">Remove</button></td><br> </tr><br></script>
The only detail here is that "Remove" button must be bound to different properties for the second table, so I repeated the template:
<script id="regularPricing" type="text/x-kendo-template"><br> <tr><br> <td><input type="number" class="numerid-box single-line" data-bind="value: hours" data-role="numerictextbox" data-format="n0" /></td><br> <td><input type="number" class="numerid-box single-line" data-bind="value: firstYear" data-role="numerictextbox" data-decimals="2" /></td><br> <td><input type="number" class="numerid-box single-line" data-bind="value: advanced" data-role="numerictextbox" data-decimals="2" /></td><br> <td><button data-bind="enabled: removePriceForStudentsButtonEnabled, click: removePriceForStudents" data-role="button">Remove</button></td><br> </tr><br></script>
It works, but there's a lot of repeating code (and even templates).
Later I will probably have 3 arrays insted of 2 now.
Since Kendo does not allow javascript in data-bind attributes (like knockout js), seems like I have to define a separate property or method in the view model for each case, even if it is logically repeating another property/method.
Can it be refactored somehow?
Thanks.