Knockout MVC с существующим кодом C# — зацикливание

Код на мой взгляд -

@{ int tabIndex = 0; }
        @using (var metricGroup = ko.Foreach(m => m.MetricGroups))
        {
            tabIndex++;
            <div id="tabs-@tabIndex" > ... </div>
         }

Проблема здесь в том, что для всех визуализируемых div идентификатор всегда один и тот же - вместо этого "tabs-1", он должен быть "tabs-1", "tabs-2", "tabs-3"...

Кто-нибудь может помочь мне с этой проблемой? У меня очень сложное представление, и Knockout MVC сводит меня с ума.


asp.net-mvc knockout.js knockout-mvc
person user979189    schedule 24.12.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Из-за ko.Foreach ваш HTML будет сгенерирован на клиентской стороне, поэтому установка идентификатора вашего div с помощью Razor не работает, поскольку код Razor выполняется на стороне сервера.

Что вам нужно сделать, так это сгенерировать идентификатор на стороне клиента с помощью Knockout, используя $index() свойство контекста привязки и attr привязка:

@using (var metricGroup = ko.Foreach(m => m.MetricGroups))
{
    <div data-bind="attr: { id: 'tabs-' + $index() }" > ... </div>
}

Метод ko.Bind.Attr Knockout-Mvc не работает с методом GetIndex(), поэтому вам нужно вручную написать это выражение привязки Knockout.

person nemesv    schedule 25.12.2013
comment
Спасибо за ответ. Я пробовал это раньше, но столкнулся с одной проблемой. Этот код генерирует идентификаторы, но поскольку мы используем индекс, они выглядят как id=0, id=1, id=2.... Я попытался использовать ‹div data-bind=attr: { id: 'tabs-' + $ index() + 1 } › ... ‹/div› Но и это не сработало. Я хочу, чтобы идентификаторы начинались с 1,2,3... - person user979189; 26.12.2013
comment
Вам просто нужно правильно сгруппировать выражение: <div data-bind="attr: { id: 'tabs-' + ( $index() + 1 ) }" > обратите внимание на ( ) jsfiddle.net/S8KQP - person nemesv; 26.12.2013