or
<div id="mydiv"> <div id="listView" data-role="listview" data-editable="true" data-template="my-template" data-bind="source: MySource"> </div> </div><script id="my-template" type="text/x-kendo-template"> <div>${Status}</div> <div> # if (Status.toUpperCase() == "SINGLE"){# <img src="imgs/black_acs.png" alt="black_acs image" /> #}else if (Status.toUpperCase() == "MARRIED"){# <img src="imgs/blue_acs.png" alt="blue_acs image" /> #}else if (Status.toUpperCase() == "OTHER"){# <img src="imgs/red_acs.png" alt="red_acs image" /> #}# </div></script><script>$(document).ready(function () { var viewModel = kendo.observable({ MySource: new kendo.data.DataSource({ // name and status transport: { read: { type: "GET", dataType: "json", contentType: "application/json; charset=utf-8", data: function () { var jsonParameters = {}; jsonParameters.parameter = "XXX"; return jsonParameters; } } } }); kendo.bind($("#mydiv"), viewModel);});</script><script id="my-template" type="text/x-kendo-template"> <div>${Status}</div> <div> # if (Status.toUpperCase() == "SINGLE"){# <img src="imgs/black_acs.png" alt="black_acs image" /> #}else if (Status.toUpperCase() == "MARRIED"){# <img src="imgs/blue_acs.png" alt="blue_acs image" /> #}else if (Status.toUpperCase() == "OTHER"){# <img src="imgs/red_acs.png" alt="red_acs image" /> #}# </div></script><script> $(document).bind("TEMPLATE_LOADED", function (e, data) { _itemTemplate = kendo.template($("#my-template").html(), { useWithBlock: false }); _itemTemplate(data); bindMe(); });$(document).ready(function () { templateLoader.loadExtTemplate("template1.tmpl.htm"); });function bindMe(){ var viewModel = kendo.observable({ MySource: new kendo.data.DataSource({ // name and status transport: { read: { type: "GET", dataType: "json", contentType: "application/json; charset=utf-8", data: function () { var jsonParameters = {}; jsonParameters.parameter = "XXX"; return jsonParameters; } } } }); kendo.bind($("#mydiv"), viewModel); }</script><script id="my-template" type="text/x-kendo-template"> <div>fixed text</div></script>$(document).ready(function () { var viewModel = kendo.observable({ order : { allocations: [], yieldCalcs: [], TradeDate: "", SettleDate: "", EventType:"", TrustCode: "", Broker: "", BondProceeds: function(){ return this.get("UnderlyingPar") * (this.get("UnderlyingPrice")/100) + this.get("UpfrontFees"); }, UnderlyingPar: "", TrustFee: "", RemarkFee: ".", WrapFee: "", LiquidFee: "", BMASIFMA: "", UnderlyingPrice: "", UpfrontFees: "", FloaterAmount:"", InverseFloatPar:"", LeverageRatio: function(){ return this.get("FloaterAmount")/this.get("InverseFloatPar"); }, ResidualYield: function(){ }, ResidualAmount: "", ResidualPrice: function(){ return this.TotalAmount()/this.get("InverseFloatPar")*100; }, InterestOnFloat: function(){ return this.get("FloaterAmount")*this.get("BMASIFMA"); }, InterestOnAssets: function(){ return this.get("UnderlyingPar") * this.get("UnderlyingCoupon"); }, ProgramFees: function(){ return (this.get("UnderlyingPar") * (this.get("TrustFee") + this.get("WrapFee"))) + (this.get("FloaterAmount") * (this.get("RemarkFee") + this.get("LiquidFee"))); }, UnderlyingYield: ".0375", UnderlyingCoupon: ".05", TerminationDate:"", EffectiveCoupon: function(){ return (this.InterestOnAssets() - this.InterestOnFloat() - this.ProgramFees())/this.get("InverseFloatPar"); }, TotalAmount: function(){ return this.get("UnderlyingPar") * (this.get("UnderlyingPrice")/100) - this.get("FloaterAmount"); }, ResAccInt: function(){ } }, yieldSource: new kendo.data.DataSource({ pageSize: 1, data: this.order, transport: { read: { url: "@Url.Action("GetYield","Home")", dataType: "json" }, create : { url: "@Url.Action("GetYield","Home")", dataType: "json" } }, schema: { model: { fields: { SettleDate: { Type: "Date", validation: {required: true }}, TerminationDate: {Type: "Date", validation: {required: true }}, EffectiveCoupon: { Type: "Number", validation: {required: true }}, ResidualPrice: { Type: "Number",validation: {required: true }}, EffectiveCoupon: {Type: "Number",validation: {required: true}}, ResidualYield: {Type: "Number",validation: {required: true}}, ResidualPrice: {Type: "Number",validation: {required: true}}, InverseFloatPar: {Type: "Number",validation: {required: true}}, LeverageRatio: {Type: "Number",validation: {required: true}}, UnderlyingPar: {Type: "Number",validation: {required: true}}, UnderlyingPrice: {Type: "Number",validation: {required: true}}, UnderlyingYield: {Type: "Number",validation: {required: true}}, UnderlyingCoupon: {Type: "Number",validation: {required: true}}, EventType: {Type: "Number",validation : {required: true}}, TrustCode: {Type: "Number",validation : {required: true}}, Broker: {Type: "Number",validation : {required: true}}, BondProceeds: {Type: "Number",validation : {required: true}}, BMASIFMA: {Type: "Number",validation : {required: true}}, WrapFee: {Type: "Number",validation : {required: true}}, RemarkFee: {validation : {required: true}}, LiquidFee: {validation : {required: true}}, ResccInt: {validation : {required: true}}, TotalAmount: "TotalAmount" } } }, parameterMap: function(options, operation){ if(operation=="create"){ console.log(options); return { models: kendo.stringify(options.models)}; } return options; } }), addYieldValues: function(){ this.yieldSource.add(this.viewModel); this.yieldSource.sync(); },