KnockoutJS и рекурсивный шаблон - PullRequest
Новая
       4

KnockoutJS и рекурсивный шаблон

7 голосов
/ 22 ноября 2011

Я видел этот вопрос , и использование его метода выдает ошибку на консоли JS Uncaught SyntaxError: Unexpected token ).

Я пытаюсь взять рекурсивный массив категорий, которые имеют свойство Children, представляющее собой массив категорий, и построить их с помощью шаблона jquery. Каждый метод, который я пробовал, приводит к некоторой синтаксической ошибке. Я проверил, что объект правильно отображается в javascript (он поступает из MVC3, используя @Html.Raw(Json.Encode(Model.Categories)), чтобы получить его в массив JS). Вот оригинальный класс csharp 

public class CategoryTreeModel
{
    public int Id { get; set; }
    public string Name{ get; set; }
    public bool Selected { get; set; }
    public bool HasChildren { get { return Children.Count > 0; } }
    public List<CategoryTreeModel> Children { get; set; }
}

Это оригинальный HTML, который вызывает первый уровень шаблона: 

<ul class="nav"  data-bind="template: {name: 'categories_template', foreach: categories}">
        </ul>

и сам шаблон: 

<script type="text/html" id="categories_template">
<li id="category_${Id}" class="category_header">${Name}
   {{if $data.HasChildren }}
        <ul data-bind='template: { name: "categories_template", foreach: Children}'>
        </ul>
   {/if}
</li>

Шаблон сработает, если я вырежу из него дочерний раздел, правильно отобразив первый уровень. Я получаю Uncaught SyntaxError: Unexpected token ), когда использую код как есть. Что я делаю не так?

Ответы [ 2 ]

4 голосов
/ 23 ноября 2011

Ваш последний {/if} должен быть {{/if}}

Вот пример: http://jsfiddle.net/rniemeyer/vbKVC/

1 голос
/ 30 августа 2013

Я думаю, у меня есть немного лучшее решение.Пожалуйста, посмотрите:

http://jsfiddle.net/nonsense66/Bzekr/

Шаблон: 

<script id="treeElement" type="text/html">
    <li>
        <span data-bind="text: name"></span>
        <ul data-bind="template: { name: 'treeElement', foreach: children }">
        </ul>
     </li>
</script>    

<ul data-bind="template: { name: 'treeElement', foreach: $data.treeRoot }"></ul>

Javascript: 

var viewModel = {
    treeRoot: ko.observableArray()
};

var TreeElement = function(name, children) {
   var self = this;
   self.children = ko.observableArray(children);
   self.name = ko.observable(name);
}

var tree = [
    new TreeElement("Russia", [
        new TreeElement("Moscow")
    ]),
    new TreeElement("United States", 
        [
            new TreeElement("New York", [ 
                new TreeElement("Harlem"),
                new TreeElement("Central Park")
            ]) 
        ])
];

viewModel.treeRoot(tree);

ko.applyBindings(viewModel);

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

...