ParseException when combining NVelocity with KnockoutJS

I'm trying to do some tutorial on knockout with NVelocity. Everything was fine but there is problem when it comes to template. When I reach the third step of this tutorial, it gives me an error in line ${meal().mealName}. Can anyone explain to me why is this happening?

Here is the stack trace :

[ParseException: Encountered "().mealName}</td>\r\n            <td>" at line 50, column 23.
Was expecting one of:
    "}" ...
    <DOT> ...
    ]
   NVelocity.Runtime.Parser.Parser.Parse(TextReader reader, String templateName) +257
   NVelocity.Runtime.RuntimeInstance.Parse(TextReader reader, String templateName, Boolean dumpNamespace) +327
   NVelocity.Runtime.RuntimeInstance.Parse(TextReader reader, String templateName) +71
   NVelocity.Template.Process() +252

[ParseErrorException: Encountered "().mealName}</td>\r\n            <td>" at line 50, column 23.
Was expecting one of:
    "}" ...
    <DOT> ...
    ]
   NVelocity.Template.Process() +585
   Castle.MonoRail.Framework.Views.NVelocity.CustomTemplate.Process() +266
   Castle.MonoRail.Framework.Views.NVelocity.CustomResourceManager.ProcessResourceWithSensibleExceptionWrapping(String resourceName, Resource resource) +67

[ResourceProcessingException: Unable to process resource 'Home\index.vm': Encountered "().mealName}</td>\r\n            <td>" at line 50, column 23.
Was expecting one of:
    "}" ...
    <DOT> ...
    ]
   Castle.MonoRail.Framework.Views.NVelocity.CustomResourceManager.ProcessResourceWithSensibleExceptionWrapping(String resourceName, Resource resource) +117
   Castle.MonoRail.Framework.Views.NVelocity.CustomResourceManager.GetResource(String resourceName, ResourceType resourceType, String encoding) +663
   NVelocity.Runtime.RuntimeInstance.GetTemplate(String name, String encoding) +81
   NVelocity.Runtime.RuntimeInstance.GetTemplate(String name) +104
   NVelocity.App.VelocityEngine.GetTemplate(String name) +71
   Castle.MonoRail.Framework.Views.NVelocity.NVelocityViewEngine.Process(String viewName, TextWriter output, IEngineContext context, IController controller, IControllerContext controllerContext) +593
   Castle.MonoRail.Framework.Services.DefaultViewEngineManager.Process(String templateName, TextWriter output, IEngineContext context, IController controller, IControllerContext controllerContext) +262
   Castle.MonoRail.Framework.Controller.ProcessView() +170
   Castle.MonoRail.Framework.Controller.RunActionAndRenderView() +2529
   Castle.MonoRail.Framework.Controller.Process(IEngineContext engineContext, IControllerContext cont开发者_如何学JAVAext) +74
   Castle.MonoRail.Framework.BaseHttpHandler.Process(HttpContext context) +175

[MonoRailException: Error processing MonoRail request. Action index on controller Home]
   Castle.MonoRail.Framework.BaseHttpHandler.Process(HttpContext context) +505
   Castle.MonoRail.Framework.BaseHttpHandler.ProcessRequest(HttpContext context) +53
   System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +100
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +75

$ is a special symbol both for NVelocity and for jQuery (by default), which causes a conflict. However, this can be redefined for jQuery by using jQuery.noConflict. Using this you can set jQuery's $ to some other symbol, although I'm not 100% sure this also works for jQuery templates (which is what knockout uses).

Alternatively, you might want to try using data-bind instead of ${ ... }