Possible to concatenate text in binding?

9 posts, 1 answers
  1. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 11 Apr 2013 Link to this post

    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.


  2. Answer
    Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 12 Apr 2013 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Elizabeth
    Elizabeth avatar
    10 posts
    Member since:
    Mar 2005

    Posted 10 Jun 2013 Link to this post

    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.
  5. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 11 Jun 2013 Link to this post

    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());
  6. Elizabeth
    Elizabeth avatar
    10 posts
    Member since:
    Mar 2005

    Posted 11 Jun 2013 Link to this post

    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!
  7. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 11 Jun 2013 Link to this post

    Hi,

    Please have a look at the following JS Bin: http://jsbin.com/ujagag/2/
  8. Elizabeth
    Elizabeth avatar
    10 posts
    Member since:
    Mar 2005

    Posted 11 Jun 2013 Link to this post

    Great, thank you.
  9. S
    S avatar
    15 posts
    Member since:
    Apr 2012

    Posted 29 Jun 2013 Link to this post

    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?
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Jul 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready