стиль Knockoutjs не является обязывающим

У меня есть следующий шаблон для Knockout.js:

        <script type="text/html" id="feed-template">
            <li data-bind="style: { backgroundColor: BackColor, backgroundImage: 'none' }"   >
                <a style="text-shadow: none" href="#" data-bind="click: ItemClicked">
                    <h1 style="WHITE-SPACE: normal; FONT-WEIGHT: bold" data-bind="text: PatientName"></h1>
                    <p style='white-space: normal;' data-bind="text: Description"></p>
                    <p style='white-space: normal;' data-bind="text: FeedEvent"></p>
                    <p style='white-space: normal;' data-bind="text: FeedTimeString"></p>
                    <span class="ui-li-count" data-bind="text: DisplayCount"></span>
                </a>
                <!-- ko if: ShowDelete -->
                    <a style="background: none; text-shadow: none;" href="#ConfirmUnfollowPopup" data-transition="pop" data-rel="popup" data-position-to="window" data-icon="delete" data-role="button"  data-inline="true" data-theme="b" data-bind="click: UnfollowClicked"></a>
                <!-- /ko -->
            </li>
        </script>

Шаблон привязывается к ObservableArray простых объектов javascript, используя привязку foreach:. Все свойства объекта привязаны правильно, кроме BackColor. BackColor — это свойство, а не функция, и его значение всегда является правильным цветом CSS (например, #556677); однако в DOM он связан просто как BackColor, а не как его значение.

Этот шаблон и привязка работали в Knockout.js 2.1, но я переношу его в Knockout.js 3.0, где он не работает.

Я попытался добавить функцию к объекту javascript, которая возвращает цвет CSS и привязать к ShowBackColor(), но это вызывает ошибку javascript глубоко в нокауте.

Любые предложения по правильному связыванию этого цвета стиля фона?


knockout.js knockout-3.0
person Cylon Cat    schedule 10.04.2014    source источник
comment
Можете ли вы предоставить свою модель просмотра?   -  person GôTô    schedule 16.04.2014

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте поставить кавычки вокруг backgroundColor.

data-bind="style: { 'backgroundColor': BackColor, 'backgroundImage': 'none' }"
person Chuck Schneider    schedule 10.04.2014
comment
Нет, без разницы. BackColor по-прежнему не является обязательным. - person Cylon Cat; 10.04.2014
comment
Можете ли вы показать модель представления? Другой вариант — использовать привязку CSS. Это может быть самое простое решение. - person Chuck Schneider; 10.04.2014
comment
Еще одна проблема, которая может быть связана с тем, что BackColor исходит из родительской привязки шаблона. Может быть, это действительно должно быть $parent.BackColor? Трудно сказать, не видя виртуальную машину и привязку. - person Chuck Schneider; 11.04.2014
comment
Первоначальный автор не использовал модель представления как таковую, и мне жаль, что у меня не было времени правильно переписать. Однако BackColor является свойством связываемого объекта, как и ItemClicked, PatientName, Description, FeedEvent, FeedTimeString, DisplayCount и ShowDelete. Все остальные связываются правильно. Кроме того, как отмечалось изначально, BackColor корректно связывается в Knockout.js 2.1; он не работает только в 3.0. - person Cylon Cat; 11.04.2014
comment
Что вы имеете в виду, не модель представления как таковая? Вы имеете в виду, что нет никаких наблюдаемых? - person Chuck Schneider; 11.04.2014
comment
Существует ObservableArray, который находится в глобальном пространстве javascript и привязан (ko.applyBindings()) к элементу DOM, содержащему привязку. Исходный код выполнял эту привязку каждый раз, когда наблюдаемый массив загружался с новым содержимым; тем не менее, более новая версия нокаута ограничивала наблюдаемые объекты только один раз, и это было исправлено. - person Cylon Cat; 11.04.2014
comment
Я не знаю внутренностей ко. Кажется странным применять привязки непосредственно к наблюдаемому массиву. Вы пытались обернуть свой observableArray в модель представления, а затем привязаться к ней? Вы можете сохранить свой глобальный массив, поэтому вам не нужно менять много кода, просто укажите на него в модели представления следующим образом: var myViewModel = { Пациенты: globalPatientsObservableArrayName }; затем используйте ko.applyBindings(myViewModel). Затем вы должны добавить data-bind=with:Patients в содержащий div в вашем html, чтобы вам не нужно было ничего менять в HTML. - person Chuck Schneider; 11.04.2014
comment
Я соглашусь, что код не самый лучший (как я уже сказал, первоначальный автор этого не сделал и т. д.), и требуется переписывание, хотя мне не дали на это время в расписании. Что меня действительно беспокоит, так это то, что все остальные нокаутные привязки (для нескольких наблюдаемых и наблюдаемых массивов) работают правильно. Это только одно свойство, которое не является обязательным. - person Cylon Cat; 11.04.2014
comment
Мое последнее предложение не требует переписывания. Кроме того, вы пробовали Knockout 3.1? - person Chuck Schneider; 11.04.2014
comment
Учитывая код приложения, да, это значительная переработка, ни в коем случае не полная, но она довольно интенсивно использует данные. Учитывая, что эта функция сейчас находится в стадии тестирования, и это единственная известная ошибка, власть предержащие решают, сколько работы они хотят приложить для ее исправления. Это будет включать в себя нокаут 3.1, поскольку обновления библиотеки всегда рискуют сломаться. Однако, поскольку я работаю в ветке, я всегда могу попробовать и при необходимости откатиться. - person Cylon Cat; 11.04.2014
comment
Пожалуйста, повторите то же самое в файле Jsfiddle. Так что мы можем смотреть как на представление, так и на модель представления. - person Rakesh; 26.05.2015

arrow_upward
0
arrow_downward

Вы можете обмануть, используя привязку attr. Это обходной путь, а не решение (у меня такая же проблема):

data-bind="attr: { style: 'background-color: ' + BackColor() + '; background-image: none' }"
person Spook    schedule 22.05.2020