Function for data-after-show with Model

[XiMnet Malaysia]

Hi, how do I set the function for a View's data-after-show if I use a model?

I have a model as below:

var foodMS = kendo.observable({
    description: "Description",
    isDescriptionShown: false,
    showDescription: function (e) {
        // show the span by setting isDescriptionShown to true
        this.set("isDescriptionShown", true);
    },
    showMessage: function (e) {
        alert(this.get("isDescriptionShown"));
    }

});

A view with data-model set to foodMS and data-after-show="showMessage".  However the showMessage does not fire when the view come into place.
The span id="showMessage" can fire the function if clicked.

<div data-role="view" data-title="Add Nice Food" data-layout="main" id="foodMS_add" data-model="foodMS" data-after-show="showMessage">

  <span id="showsomething" data-bind="events: { click: showMessage }">
                        <button data-role="button">Show</button>
                    </span>

</div>

Is this the correct way to set the function for the data-after-show?

Thanks.

[Petyo]

Hello,

the correct syntax of that would be something like this:

data-bind="events: { afterShow: showMessage }"

Regards,
Petyo
Telerik

 

 

[XiMnet Malaysia]

Thanks, Petyo.

In what situation should we be using data-after-show="showMessage" compared to data-bind="events: { afterShow: showMessage }"
 ?

[Petyo]

Hi,

the first syntax is a declarative event assigning, while the second one performs MVVM binding to the given model. You may refer to the following documentation article (and the linked help topics) for more details. 

Regards,
Petyo
Telerik