Почему шаблон не отображается? - PullRequest
Новая
       3

Почему шаблон не отображается?

0 голосов
/ 05 февраля 2011

Мне интересно, почему li не добавляется. 

<! DOCTYPE html>
<html>
<head>
    <title>Trying out knockout</title>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
    <script type="text/javascript" src="jquery.tmpl.js"></script>
    <script type="text/javascript" src="knockout-1.1.2.debug.js"></script>      
    <script type="text/javascript">
        var viewModel ={
            personName:ko.observable('Stan Marsh'),         
            personAge:ko.observable(28),
            grades:[
                    {subject:"Math",grade:'A'},
                    {subject:"Physics",grade:'B'},
                    {subject:"Chemistry",grade:'A'},
                    {subject:"Biology",grade:'A'}
            ]           
        };      


    $(document).ready(function (){      
        // Apply knockout bindings
        ko.applyBindings(viewModel);
        // Apply templates          
        function renderList() {
          $("#tmplGrades").tmpl(viewModel.grades).append("#ulGradeList"); 
        };      
        // Event Wireup
        $('#btnViewChanges').click(function(){
        var message = "New Name:"+viewModel.personName()+" and New Age:"+ viewModel.personAge();
            alert(message);

        });

    });

    </script>
    <script id="tmplGrades" type="text/html">
    {{each viewModel.grades}}<li>Subject: ${subject} , Grade: ${grade}</li>
    </script>   
</head>
<body>
    <fieldset>
        <legend>Person</legend>
        <p>
            <label for="tbPersonName">Name:</label>
            <input type="text" id="tbPersonName" data-bind="value:personName" />
        </p>
        <p>
            <label for="tbAge">Age:</label>
            <input type="text" id="tbAge" data-bind="value:personAge" />
        </p>
        <input type="button" id="btnViewChanges" value="View Changes"/>
    </fieldset>
    <ul id="ulGradeList">

    </ul>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 05 февраля 2011 
$("#tmplGrades").tmpl(viewModel.grades).append("#ulGradeList");

Я думаю, что вы имеете в виду appendTo не append.

append добавляет содержимое к выбранному элементу, в то время как appendToдобавляет выбранный контент к элементу, указанному в селекторе.

1 голос
/ 05 февраля 2011

Вот пример, который работает: http://jsfiddle.net/rniemeyer/ztgfG/

Похоже, в вашем коде рендеринг шаблона был в функции с именем renderList () , которая не вызывалась.Кроме того, если вы передадите массив для рендеринга шаблона, он автоматически сделает это для каждого элемента в массиве, поэтому вам не нужно было использовать {{each}}.

Пример JSFiddle также показывает, каквы можете сделать вывод шаблона для вас, используя привязку шаблона.Таким образом, вам вообще не нужно делать вызов .tmpl.

Надеюсь, это поможет.

...