some newbie knockoutjs questions when working with asp.net mvc

Question

I am new to working with knockoutjs so need some assistance around what I am trying to achieve and best practise.

I am working on an mvc4 application where I am calling a controller action that returns json and I am then binding it to my view model eg.

 $.getJSON("/cart/summary", function (data) {
        myModel = ko.mapping.fromJS(items);
        ko.applyBindings(myModel , document.getElementById("my-container"));
    });

The myModel view model is a direct representation of the json object returned from the controller.

The object contains a property (Prop1) which is an object and another property (Prop2) with a list of objects.

Prop1 object contains a decimal property that I would like to format as currency using the Globalize plugin. What is the best practise, should this be done in the viewmodel and binded to the view? If so, how can I extend my model to do this? Or done in the view?

I want to show a div if Prop2 has more than 0 items, ie. its not empty. Similar question again, should I return a property signalling this or do it in the markup?

I would like to bind a property to append text to a div, how is this done?

Finally, after binding is completed, I would like to animate the fact that binding is complete - dont care what the affect is, just like to know how its done?

Thanks for any feedback.

parKing parKing · Accepted Answer · 2013-02-19T15:30:36

That's a lot of questions for one "question". I think I addressed them all.

If you want to use the globalize plugin, you will be best off doing the currency formatting client side. As a general rule of thumb, presentation logic should be done in the presentation layer anyway. Your business logic, and even other views may not want the currency formatting.

Again, following the same rule of thumb, the presentation layer is the thing that cares how many items your model object has. This can easily be accomplished with ko bindings.

http://knockoutjs.com/documentation/if-binding.html

<!-- ko if: listObjectName.length > 0-->
    // put your div and list bindings in here
<!-- /ko -->

To append text to a div, you can bind to the text or html of a span depending on your exact goal.

http://knockoutjs.com/documentation/html-binding.html

To put an animation after the load is complete, you can use the afterRender event.

http://knockoutjs.com/documentation/template-binding.html#note_4_using_afterrender_afteradd_and_beforeremove

To summarize the article, you need to set up your template:

<div data-bind='template: { name: "personTemplate",
                       data: myData,
                       afterRender: myPostProcessingLogic }'> </div>

And then you can create the myPostProcessingLogic function on the myData viewmodel.

Here is a stackoverflow post on adding a glow effect on mouse hover or at set intervals. You care most about the technique used for the interval. Instead of doing it at set intervals, you would just do it whenever the myPostProcessingLogic is called.

How do I animate a glowing effect on text?

some newbie knockoutjs questions when working with asp.net mvc

1 Answers