MS AJAX Library 4.0 Sys.create.dataView

Question

One again Microsoft poor documentation has left me confused. I am trying to use the new features of the .NET 4.0 framework. I am using the following code to populate the Title and Director but it keeps getting blank.

The service returns the result correctly like

[d: { title = "ss, director ="" } something like that but the li never gets populated.

<script language="javascript" type="text/javascript">

        Sys.require([Sys.components.dataView, Sys.components.dataContext,Sys.scripts.WebServices], function () {

            Sys.create.dataView("#moviesView",
    {
        dataProvider: "MovieService.svc",
        fetchOperation: "GetMovies",
        autoFetch: true          


    });

        });

</script>

And here it the HTML code:

 <ul id="moviesView">

    <li>
    {{Title}} - {{Director}}
    </li>

    </ul>

IS THIS THE LATEST URL TO Start.js file.

<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"&gt;&lt;/script&gt;

Here is the Ajax-Enabled WCF Service:

 [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class MovieService
    {
        [OperationContract]
        public Movie GetMovies()
        {
            return new Movie() { Title = "SS", Director = "SSSSS" }; 
        }
    }

    [DataContract]
    public class Movie
    {
        [DataMember]
        public string Title { get; set; }

        [DataMember]
        public string Director { get; set; } 
    }

Answer 1

You need to add the sys-template class attribute to the unordered list tag.

<ul id="moviesView" class="sys-template">

Here's an excerpt from Client-side Data Binding in ASP.NET AJAX 4.0

The one other requirement for defining a template is the parent element must have the sys-template CSS class applied, and that class must be defined with display set to none, as shown in the example above. This convention serves two purposes – it helps the parser identify which elements are part of a template on your page (which will become important when we use declarative instantiation), and it keeps the template markup hidden until ASP.NET Ajax has completed the binding (it will toggle the display to be visible).