Knockout IE8 Проблема с привязкой данных foreach и привязкой ввода - PullRequest
Новая
       14

Knockout IE8 Проблема с привязкой данных foreach и привязкой ввода

4 голосов
/ 02 февраля 2012

Я использую knockoutjs 2.0. Я пытался заставить эту таблицу работать в IE8 (она отлично работает в FF, Chrome и IE9): 

<table data-bind="foreach: Applications">
    <tr>
        <td><input type="text" data-bind="value: Name"/></td>
    </tr>
</table>

В IE8 я получаю сообщение об ошибке: Ошибка: 'undefined' равен нулю или не является URL объекта: http://127.0.0.1:81/Scripts/jquery-1.5.1.min.js

Я на самом деле исправил проблему, сделав таблицу tbody с шаблоном, и сделав шаблон, содержащий строку таблицы.Но это не так чисто, и мне интересно, есть ли лучшее решение.

Ниже описано, как настроить модель представления: 

self.Applications = ko.observableArray([]);

$.each(model.Applications, function (i, applicationItem) {
    var application = new Application(applicationItem.ApplicationID, applicationItem.Name);
    self.Applications.push(application);
});

function Application(applicationID, name) {
    var self = this;
    self.ApplicationID = applicationID
    self.Name = ko.observable(name);
};

РЕДАКТИРОВАТЬ: найдено решение Используется вместо контейнера управления потоком 

<table>
    <tbody>
    <!-- ko foreach: Applications -->
    <tr>
        <td><input type="text" data-bind="value: Name"/></td>
    </tr>
    <!-- /ko -->
    </tbody>
</table>

Ответы [ 2 ]

6 голосов
/ 03 февраля 2012

ваше исправление работает нормально, если вы хотите менее подробный вариант, вы можете просто поместить привязку данных на узел "tbody": 

<table>
    <tbody data-bind="foreach: Applications">
        <tr>
            <td><input type="text" data-bind="value: Name"/></td>
        </tr>
    </tbody>
</table>

Проблема в том, что ie8 автоматически добавляет "tbody"в DOM (даже если нет в разметке).Итак, если атрибут data-bind находится на узле «table», когда knockout выполняет foreach, новые дочерние элементы добавляются в «table», а не в «tbody», получая что-то вроде: 

<table data-bind="foreach: Applications">
    <tr>
        <td><input type="text" value="John"/></td>
    </tr>
    <tbody>
    </tbody>
</table>

И IE не рад этому.Вот почему, как вы уже наверняка обнаружили, недостаточно использовать только нотацию «без контейнеров», и вам нужен узел «tbody».Обратите внимание, что другие браузеры не имеют проблем с этим.Это один из приемов, которые необходимо знать при использовании knockoutjs.

Надеюсь, это поможет понять, что происходит.

0 голосов
/ 02 февраля 2012

Я бы сказал, что вы должны использовать $ data.Name вместо просто Name.В противном случае, нокаут ожидает, что имя будет доступно в вашем ViewModel / $ root.

...