Вложенные ListView или вложенные репитеры

Question

Я пытаюсь создать вложенные повторитель или вложенное представление списка с помощью WinJS 4.0, но я не могу понять, как связать источник данных внутреннего списка/повторителя.

Вот пример того, что я пытаюсь сделать (обратите внимание, что управление может быть повторитель, который я предпочел бы):

HTML:

<div id="myList" data-win-control="WinJS.UI.ListView"> 
     <span data-win-bind="innerText: title"></span>   
     <div data-win-control="WinJS.UI.ListView"> 
     <span data-win-bind="innerText: name"></span>    
    </div> 
</div> 

JS:

var myList = element.querySelector('#myList).winControl; 
var myData = [ 
     { 
      title: "line 1", 
      items: [ 
       {name: "item 1.1"}, 
       {name: "item 1.2"} 
      ] 
     }, 
     { 
      title: "line 2", 
      items: [ 
       {name: "item 2.1"}, 
       {name: "item 2.2"} 
      ] 
     } 
    ]; 
    myList.data = new WinJS.Binding.List(myData); 

Когда я пытаюсь это сделать, для внутреннего списка ничего не отображается. Я попытался использовать этот ответ Nested Repeaters Using Table Tags и этот WinJS: Nested ListViews, но у меня все еще есть такая же проблема, и я надеялся, что это будет немного менее сложно (например, KnockOut).

Я знаю, что упоминается, что WinJS не поддерживает вложенные ListViews, но это похоже на несколько лет назад, и я надеюсь, что это все еще не проблема.

Update

я смог вложенный ретранслятор правильно работать, благодаря ответу Kraig в. Вот что мой код выглядит как:

HTML:

<div id="myTemplate" data-win-control="WinJS.Binding.Template"> 
    <div 
     <span>Bucket:</span><span data-win-bind="innerText: name"></span> 
     <span>Amount:</span><input type="text" data-win-bind="value: amount" /> 
     <button class="removeBucket">X</button> 
     <div id="bucketItems" data-win-control="WinJS.UI.Repeater" 
     data-win-options="{template: select('#myTemplate')}" 
     data-win-bind="winControl.data: lineItems"> 
     </div> 
    </div> 
</div> 
<div id="budgetBuckets" data-win-control="WinJS.UI.Repeater" 
    data-win-options="{data: Data.buckets,template: select('#myTemplate')}"> 
</div> 

JS: (после "использовать строгий" заявление)

WinJS.Namespace.define("Data", { 
     buckets: new WinJS.Binding.List([ 
      { 
       name: "A", 
       amount: 5, 
       lineItems: new WinJS.Binding.List([ 
         { name: 'test item1', amount: 50 }, 
         { name: 'test item2', amount: 25 } 
        ] 
       ) 
      } 
     ]) 
    }) 

* Обратите внимание, что это отвечает часть моего вопроса, однако , Я бы очень хотел сделать это после вызова репо и установить программный источник ретранслятора. Я буду продолжать работать над этим, и если я получу его, я опубликую это как принятый ответ.

Answer 1

Хорошо, поэтому я должен отдать должное Крайгу, потому что он меня на правильном пути, чтобы это получилось, и справочная книга Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition изумительна.

Оригинальная проблема была связана с неправильным использованием шаблонов (с использованием фигурных скобок в атрибуте data-win-bind), а не для правильного структурирования моего HTML-кода, а не для установки дочерних списков в качестве источника данных WinJS.Binding.List. Ниже приводится окончательный рабочий код структура созданного вложенного повторителя при связывании данных из кода только:

HTML:

Это шаблон для дочерних списков. Он похож, но я планирую добавить больше вещей, поэтому я хотел, чтобы он был отдельным, а не рекурсивным, как указано в книге. Обратите внимание, что внутренний div после объявления управления шаблоном был для меня важен.

<div id="bucketItemTemplate" data-win-control="WinJS.Binding.Template"> 
    <div> 
     <span>Description:</span> 
     <span data-win-bind="innerText: description"></span> 
     <span>Amount:</span> 
     <input type="text" data-win-bind="value: amount" /> 
     <button class="removeBucketItem">X</button> 
    </div> 
</div> 

Это основной шаблон репитера для списков. Обратите внимание, что внутренний div после объявления управления шаблоном был для меня важен. Другим ключевым моментом было использование свойства winControl.data против имени свойства дочерних списков.

<div id="bucketTemplate" data-win-control="WinJS.Binding.Template"> 
    <div> 
     <span>Bucket:</span> 
     <span data-win-bind="innerText: bucket"></span> 
     <span>Amount:</span> 
     <input type="text" data-win-bind="value: amount" /> 
     <button class="removeBucket">X</button> 
     <div id="bucketItems" data-win-control="WinJS.UI.Repeater" 
     data-win-options="{template: select('#bucketItemTemplate')}" 
     data-win-bind="winControl.data: lineItems"> 
     </div> 
    </div> 
</div> 

Это основной элемент управления для вложенного ретранслятора, и он довольно простой.

<div id="budgetBuckets" data-win-control="WinJS.UI.Repeater" 
    data-win-options="{template: select('#bucketTemplate')}"> 
</div> 

JavaScript:

JavaScript спустился на несколько простых шагов:

1. Получение WinControl

   var bucketsControl = element.querySelector('#budgetBuckets').winControl;

2. Перебор т он элементы и делают дочерние списки в Binding списков - данные здесь состоит, но могли бы легко пришел из репо:

   var bucketsData = selectedBudget.buckets; for (var i = 0; i < bucketsData.length; i++) { bucketsData[i].lineItems = new WinJS.Binding.List([{ description: i, amount: i * 10 }]); }

3. Затем, наконец, преобразование всех данных в Binding список и установить его в свойство data данных winControl.

   bucketsControl.data = new WinJS.Binding.List(bucketsData);

* Обратите внимание, что это весь файл JavaScript, для ясности.

(function() { 
    "use strict"; 
    var nav = WinJS.Navigation; 

    WinJS.UI.Pages.define("/pages/budget/budget.html", { 
     // This function is called whenever a user navigates to this page. It 
     // populates the page elements with the app's data. 

     ready: function (element, options) { 
      // TODO: Initialize the page here. 
      var bindableBuckets; 
      require(['repository'], function (repo) { 
       //we can setup our save button here 
       var appBar = document.getElementById('appBarBudget').winControl; 
       appBar.getCommandById('cmdSave').addEventListener('click', function() {      
        //do save work 
       }, false); 
       repo.getBudgets(nav.state.budgetSelectedIndex).done(function (selectedBudget) { 
        var budgetContainer = element.querySelector('#budgetContainer'); 
        WinJS.Binding.processAll(budgetContainer, selectedBudget); 
        var bucketsControl = element.querySelector('#budgetBuckets').winControl; 
        var bucketsData = selectedBudget.buckets; 
        for (var i = 0; i < bucketsData.length; i++) 
        { 
         bucketsData[i].lineItems = new WinJS.Binding.List([{ description: i, amount: i * 10 }]); 
        } 
        bucketsControl.data = new WinJS.Binding.List(bucketsData); 
       }); 

      }); 
      WinJS.UI.processAll(); 

     } 
    }); 
})(); 

Answer 2

HTML Repeater control sample для Windows 8.1 имеет пример в сценарии 6 с вложенным ретранслятором, и в этом случае ретранслятор создается с помощью элемента управления Template. Это хорошее место для начала. (Я обсуждаю этот образец в главе 7 из Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, начиная со страницы 372 или 374 для вложенной части.)

Должно по-прежнему работать с WinJS 4, хотя я не пробовал.