Possible to concatenate text in binding?

[David A.]

Hi,

I am trying to concatentate text like so:

js

viewModel = kendo.observable({
                       AdminName: data.AdminName,
                       AdminEmail: data.AdminEmail
                   });

    kendo.bind($("#admin"), viewModel);

html

<a data-bind="attr: { href: 'mailto:' + AdminEmail}, text: AdminName"></a>

but this doesn't work.  Can I concatenate text, or do I have to define the exact text in the viewmodel?

David A.

[Holger]

Hi David,

you will have to add an appropriate function to the viewmodel and bind to that.

For further information please refer to following documentation topic: Kendo MVVM Overview

Regards,
Holger

[Elizabeth]

Do you know how I could create functions if my data is not like this:

var viewModel = kendo.observable({
person: {
name: "John Doe"
}
});
kendo.bind($("div"), viewModel);


But like this:
var viewModel = kendo.observable(block of JSON data);
kendo.bind($("span"), viewModel);

Thanks.

[Holger]

Hi,

What type is 'block of JSON data'? Is it a string or an object?

You cannot create an observable from a string. You will first have to parse the JSON data to an object, afterwards you can add an appropriate function to it.

var jsonData = '{"field1":"abc","field2":"123"}';
var model = JSON.parse(jsonData);

var viewModel = kendo.observable({
   model: model,

   myFunc: function() {
      return this.get('model.field1') + this.get('model.field2');
   }
});

console.log(viewModel.myFunc());

[Elizabeth]

I am using JSON.parse and that's working fine. Your sample works for me, thanks, but now how would I bind the value of the function? I am currently using "kendo.bind($("span"), viewModel);" to bind to spans in the page (<span data-bind="text: name"></span>".

How would I now bind any functions?

Thanks!

[Holger]

Hi,

Please have a look at the following JS Bin: http://jsbin.com/ujagag/2/

[Elizabeth]

Great, thank you.

[S]

How about when I try to bind to observableArray (observableObject)? The data is an array and creating a function is not possible.

var vm = kendo.observalbe({
    products: [{ProductId: 1,ProductName: "Camera"}, {ProductId: 2, ProductName: "Toy"}]
})

From the view model above, I am trying to bind:
<input type="text" data-bind="attr: { class: 'ProductNumber' + ProductId }" />

To bind the observableObject, I use kendo Template. but, still need somekind of function to that in the template. How would my function be? 

UPDATE:
I get around this with Kendo Template Syntax: http://demos.kendoui.com/web/mvvm/source.html (basically using Source and Template to work with repeating data).

So, instead of binding it "attr", I used:
class="ProductNumber#: kendo.toString(get("ProductId")) #"

But just wondering if there a way to create a function to concatenate it with a string?

[Alexander Valchev]

Hello Suhendra,

Kendo MVVM bindings are not JavaScript, so you cannot use a syntax like 'ProductNumber' + ProductId as part of the data-bind attribute.

If a value from the View-Model requires processing before displaying it in the View a method should be created and used instead. An example could be found in the corresponding documentation. An alternative and handy solution is to use the Kendo template syntax which allows writing JavaScript expressions.

• http://docs.kendoui.com/getting-started/framework/templates/overview#template-syntax
  
  

Regards,
Alexander Valchev
Telerik