связывать разные шаблоны Knockout JS внутри цикла foreach

Question 1

Я пытаюсь использовать шаблоны KO для синтаксического анализа файла JSON (см. Здесь) в несколько симпатичных макетов сетки .. ( думаю, что это похоже на макеты каменной кладки / изотопов) .. каждый раздел шаблона будет иметь прямоугольники и квадраты разного размера внутри, но общий шаблон соответствует сетке из 5 полей в ширину и 3 элементов в высоту (например)

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

Моя проблема в том, что я не могу заставить его проверить, какой ключ в массиве ViewTestProposal я сейчас использую.

Ниже мой код WIP ..

<div data-bind="template: {if: Template == 'basic2', visible: Template == 'basic2', foreach: ViewTestProposal}">
    <div data-bind="template: {if: ViewTestProposal[0], name: 'single'}"></div>
</div>
<script type="text/html" id="single">
    <div class="box single">
        <p data-bind="text: Artist, attr:{title: Artist}"></p>
    </div>
</script>

Я безуспешно пытался изменить раздел if: ViewTestProposal[0] на with: ViewTestProposal[0], if: ViewTestProposal() === 0 и if: ViewTestProposal == 0.

Заранее благодарим за любую помощь, которую вы можете предоставить

templates binding foreach knockout.js

0

haxxxton 2 Окт 2012 в 12:41

Answer

Параметр имени шаблона может быть функцией, которая возвращает имя на основе текущего элемента в массиве (См. Примечание 4). С его помощью вы можете получить доступ к свойству каждого элемента, имеющего имя шаблона:

<div data-bind="template: {
        foreach: ViewTestProposal, 
        name: function(item) {return item.boxsize;}
    }"></div>

Если вам нужно использовать индекс элемента в массиве, это доступно, начиная с версии Knockout 2.1 через $index свойство контекста. Начиная с версии 2.2 (еще не выпущенной [1 октября 2012 г.], но доступна версия-кандидат ) функция имени также может обращаться к объекту контекста. Тогда вы могли бы сделать что-то вроде этого:

<div data-bind="template: {
        foreach: ViewTestProposal, 
        name: function(item, context) {
            switch(context.$index()) {
            case 0:
                return 'single';
            case 1:
                return 'double';
            // etc.
            }
        }
    }"></div>

Очевидно, что сама функция может быть определена в вашей модели представления.

4

Michael Best 3 Окт 2012 в 02:50

Как ни печально ... я тоже его взломал ... большое вам спасибо за дополнительную информацию! Очень признателен

–

haxxxton

2 Окт 2012 в 14:55

Я пробовал скопировать и вставить ваш код в шаблон KO, но похоже, что он ничего не выводит? не могли бы вы предложить что-нибудь еще?

–

haxxxton

2 Окт 2012 в 16:10

Я забыл $ в context.$index. Я его сейчас обновил. Если проблема не исчезла, попробуйте проверить журнал консоли браузера на наличие ошибок.

–

Michael Best

3 Окт 2012 в 02:50

Question 2

Параметр имени шаблона может быть функцией, которая возвращает имя на основе текущего элемента в массиве (См. Примечание 4). С его помощью вы можете получить доступ к свойству каждого элемента, имеющего имя шаблона:

<div data-bind="template: {
        foreach: ViewTestProposal, 
        name: function(item) {return item.boxsize;}
    }"></div>

Если вам нужно использовать индекс элемента в массиве, это доступно, начиная с версии Knockout 2.1 через $index свойство контекста. Начиная с версии 2.2 (еще не выпущенной [1 октября 2012 г.], но доступна версия-кандидат ) функция имени также может обращаться к объекту контекста. Тогда вы могли бы сделать что-то вроде этого:

<div data-bind="template: {
        foreach: ViewTestProposal, 
        name: function(item, context) {
            switch(context.$index()) {
            case 0:
                return 'single';
            case 1:
                return 'double';
            // etc.
            }
        }
    }"></div>

Очевидно, что сама функция может быть определена в вашей модели представления.

4

Michael Best 3 Окт 2012 в 02:50

Как ни печально ... я тоже его взломал ... большое вам спасибо за дополнительную информацию! Очень признателен

–

haxxxton

2 Окт 2012 в 14:55

Я пробовал скопировать и вставить ваш код в шаблон KO, но похоже, что он ничего не выводит? не могли бы вы предложить что-нибудь еще?

–

haxxxton

2 Окт 2012 в 16:10

Я забыл $ в context.$index. Я его сейчас обновил. Если проблема не исчезла, попробуйте проверить журнал консоли браузера на наличие ошибок.

–

Michael Best

3 Окт 2012 в 02:50

связывать разные шаблоны Knockout JS внутри цикла foreach

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

templates