Problem using "observable"

5 posts, 0 answers
  1. Elizabeth
    Elizabeth avatar
    11 posts
    Member since:
    Mar 2005

    Posted 06 Jun 2013 Link to this post

    I'm new to Kendo, so this may be a stupid question.

    I'm trying to use use a hidden input field as a data source and this is failing.

    <input id="jsonall" type="hidden" value='{ "university": { "AltBreak": "Yes", "ABAverage": "5.8", "id": "17360" } }'>
    <span data-bind="text: university.AltBreak"></span>
    <span data-bind="text: university.ABAverage"></span>
    <span data-bind="text: university.id"></span>

    var viewModel = kendo.observable($('input[id=jsonall]').val());
    kendo.bind($("span"), viewModel);

    But if I hard code the data like below, it is working:
    var viewModel = kendo.observable({ "university": { "AB": "Yes", "ABAverage": "5.8", "id": "12345" } });

    Any suggestions?

    Thanks.
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 10 Jun 2013 Link to this post

    Hi Elizabeth,

    Value of the input is a string, not JavaScript object. In order to build ViewModel from it you should parse it at first.
    var viewModel = kendo.observable(JSON.parse($('input[id=jsonall]').val()));
    kendo.bind($("span"), viewModel);

    I hope this will help.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Elizabeth
    Elizabeth avatar
    11 posts
    Member since:
    Mar 2005

    Posted 10 Jun 2013 Link to this post

    Thanks, that did it. One other thing, the examples I've seen using functions are like the example below where the function is in the data, how/can I create a function outside of the original data source?

    var viewModel = kendo.observable({
    firstName: "John",
    lastName: "Doe",
    fullName: function() {
    return this.get("firstName") + " " + this.get("lastName");
    }
    });
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 12 Jun 2013 Link to this post

    Hi Elizabeth,

    I am afraid that your question is a bit unclear. Provided code snippet does not contain a DataSource object and does not explain the details of your scenario. Is it possible for you to provide another example which demonstrates your exact case?
    Thank you in advance.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Elizabeth
    Elizabeth avatar
    11 posts
    Member since:
    Mar 2005

    Posted 12 Jun 2013 Link to this post

    My JSON data was in a string, once I used JSON.parse, it worked.
Back to Top