why am I haveing to rebind this span

3 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    213 posts
    Member since:
    Dec 2009

    Posted 30 Apr 2013 Link to this post

    I have the following VM:

    var ExportVM = kendo.observable({
        ticketID: "bad",
        maxTiles: 15,
        jobTime: "not yet set",
        timeEstimate: "really bad",
        tileRate: 0,
        tileCount: 0
    Which I am binding at the top a large DOM, which deep inside has the following two spans that are being data bound:

    <div id="ExportBeginBlock">
        <div class="SectionBlock">
            <span>Estimated Time:</span>
            <span data-bind="text: jobTime"></span>
        <div class="SectionBlock">
            <span>Estimated Tile Files:</span>
            <span data-bind="text: maxTiles"></span>
        <div id="buildMapPackageButton" class="k-button button green bigrounded">BUILD MAP PACKAGE</div>
        <div id="cancelMapButton" class="button rosy bigrounded k-button">CANCEL</div>
    Every once and a while a message comes in from the server and I update the VM:

    01.function ShowEstimates(data)
    03.    ExportVM.set("maxTiles", data.maxTiles);
    04.    ExportVM.set("ticketID", data.ticket);
    05.    ExportVM.set("jobTime", data.timeEstimate);
    06.    ExportVM.set("timeEstimate", data.timeEstimate);
    07.    ExportVM.set("tileRate", data.tileRate);
    08.    kendo.bind($("#ExportBlock"), ExportVM);

    Ok, this works fine, as long as the line #8, iwhich does the rebind is in. But if I move the binding out of the update loop, and do it once at the beginning of the code, then this is not getting rebound! I thought the whole idea of MVVM was that you can just update the VM values. What am I missing.

    I have looked in firebug, and I see that the VM is being updated, but I don't see the DOM changing unless I force it.

    I am a noobie at MVVM so I assume I am doing something dumb.

  2. Answer
    Atanas Korchev
    Atanas Korchev avatar
    8462 posts

    Posted 01 May 2013 Link to this post


     Here is a demo showing how updating the view model is reflected in DOM: http://jsbin.com/uyisov/1/edit

    Kind regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Dr.YSG
    Dr.YSG avatar
    213 posts
    Member since:
    Dec 2009

    Posted 01 May 2013 Link to this post

    Well, I am stumped. I ran your demo. It works, so that did not help.

    So I guessed perhaps it is because I am using jquery hide() and show() and you are not finding it in my DOM. So I  revised the JSBIN demo:


    But even so no luck.

    So I went back to my code, and with no changes it is working today. Puzzled, but thank you for your time.

Back to Top