Отображение рендеринга нокаута, когда глубина неизвестна

Я пытаюсь отобразить nestled list с knockout.js, но моя проблема в том, что я не знаю, сколько уровней дочерних объектов у меня перед рукой в объекте. Это может быть ни один, ни один или триста уровней внуков.Отображение рендеринга нокаута, когда глубина неизвестна

Это пример того, что я при чтении только из одного уровня в списке:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> 
     <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 

     <ul data-bind="template: { name: 'friendTemplate', foreach: friends, as: 'friend' }"></ul> 

     <!-- Template --> 
     <script type="text/html" id="friendTemplate"> 
      <li> 
       <strong data-bind="text: fullName"></strong> 
       id: <span data-bind="text: id"></span>, 
       parentId: <span data-bind="text: parentId"></span> 
      </li> 
     </script> 

     <script type="application/javascript"> 
      function friend(id, parentId, firstName, lastName) { 
       this.id = id; 
       this.parentId = parentId; 
       this.profilePicture = ""; 
       this.firstName = firstName; 
       this.lastName = lastName; 
       this.friends = ko.observableArray(); 

       this.fullName = ko.computed(function() { 
        return firstName + " " + lastName; 
       }); 
      } 

      function userViewModel(id) { 
       this.id = id; 
       this.profilePicture = ""; 
       this.firstName = ko.observable("Bert"); 
       this.lastName = ko.observable("Bertington"); 
       this.friends = ko.observableArray(); 

       this.fullName = ko.computed(function() { 
        return this.firstName + " " + this.lastName; 
       }); 
       this.addFriend = function() { 
        this.friends.push(new friend(-1, this.id, 'John', 'Doe')); 
       }.bind(this); 
      } 
      var user = new userViewModel(1); 
      ko.applyBindings(user); 

      var friend1 = new friend(0, user.id, 'Patty', 'Smith'); 
      friend1.friends.push(new friend(0, user.id, 'Henry', 'Bellard')); 

      user.friends.push(friend1); 
      user.friends.push(new friend(1, user.id, 'George', 'Maddison')); 
      user.friends.push(new friend(2, user.id, 'Takashi', 'Hendrixsson')); 
      user.friends.push(new friend(3, user.id, 'Bella', 'Suffeur')); 
     </script> 
    </body> 
</html>

Как вы можете видеть, что первый друг в списке также есть друг, и в теории этот друг также может есть друг.

Так как я могу отдать этих друзей, когда я не знаю уровня птенца? Нужно ли добавлять эти элементы динамически с помощью JQuery или некоторых таких?

источник

2014-10-10 Bingla

так Theres очень хороший пример о unobstrousive Нокаут http://knockoutjs.com/documentation/unobtrusive-event-handling .html –

Вы должны использовать рекурсию для решения этой проблемы. Вам нужно добавить еще мкл внутри литий, который использует тот же шаблон:

<!-- Template --> 
<script type="text/html" id="friendTemplate"> 
    <li> 
     <strong data-bind="text: fullName"></strong> 
     id: <span data-bind="text: id"></span>, 
     parentId: <span data-bind="text: parentId"></span> 
     <ul data-bind="template: { name: 'friendTemplate', foreach: friends, as: 'friend' }">  
     </ul> 
    </li> 
</script>

http://jsfiddle.net/Wk7dr/11/

источник

2014-10-10 15:15:02

Хотя эта ссылка может ответить на вопрос, лучше включить здесь основные части ответа и предоставить ссылку для справки. Ответные ссылки могут стать недействительными, если связанная страница изменится. –

@DavidCrowell Хорошо. Я обновлю ответ –

Отображение рендеринга нокаута, когда глубина неизвестна

ответ

Смежные вопросы