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

Possible to concatenate text in binding?

8 Answers 338 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
David A.
Top achievements
Rank 1
David A. asked on 11 Apr 2013, 08:36 PM
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.


8 Answers, 1 is accepted

Sort by
0
Accepted
Holger
Top achievements
Rank 1
answered on 12 Apr 2013, 06:14 AM
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
0
Elizabeth
Top achievements
Rank 1
answered on 10 Jun 2013, 04:31 PM
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.
0
Holger
Top achievements
Rank 1
answered on 11 Jun 2013, 07:45 AM
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());
0
Elizabeth
Top achievements
Rank 1
answered on 11 Jun 2013, 12:59 PM
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!
0
Holger
Top achievements
Rank 1
answered on 11 Jun 2013, 01:33 PM
Hi,

Please have a look at the following JS Bin: http://jsbin.com/ujagag/2/
0
Elizabeth
Top achievements
Rank 1
answered on 11 Jun 2013, 08:13 PM
Great, thank you.
0
S
Top achievements
Rank 1
answered on 29 Jun 2013, 04:07 PM
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?
0
Alexander Valchev
Telerik team
answered on 03 Jul 2013, 07:13 AM
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.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
David A.
Top achievements
Rank 1
Answers by
Holger
Top achievements
Rank 1
Elizabeth
Top achievements
Rank 1
S
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or