Knockout MVC4 incompatible when nesting Javascript with html

Question

When I run the code below I get the:

{{each(index,friend)friends}}
    '<'li>${name}'<'/li>
    {{/each}}

printed on the screen instead of the array elements I don't know if this has anything to do with HTML5. Also I added the jquery,konckout references and checked the syntax.

    '<'h1>Friends'<'/h1>

'<'div data-bind="template: 'friendsTemplate'">'<'/div>



'<'script id="friendsTemplate" type="text/html"'>'
'<'ul>
    {{each(index,friend)friends}}
    '<'li>${name}'<'/li>
    {{/each}}
'<'/ul>

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


    function friend(name) {
        return { name: ko.observable(name) };
    }

    var viewModel = {

        friends: ko.observableArray([new friend("Ram"), new friend("Sam")]),
        addFriend: function () {
            this.friends.push(new friend("Another Guy"));
        }
    };


     ko.applyBindings(viewModel);

     
/////////

You are using the jquery tmpl syntax here, have you included the jquery and the jquery tmpl plugin? — nemesv
Yes I Included, also i debugged the js with fire bug no errors was found — SamSamet

user2632829 user2632829 · Accepted Answer · 2013-07-30T06:15:30

you can try giving the script tag of your template an invalid mime type like..

<script id="friendsTemplate" type="text/x-jquery"'>

also try modifying your template each synatx to

{{each friends}}

Knockout MVC4 incompatible when nesting Javascript with html

1 Answers