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

Я использую 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 я получаю сообщение об ошибке: Ошибка: «неопределенный» имеет значение null или не является URL-адресом объекта: http://127.0.0.1:81/Scripts/jquery-1.5.1.min.js

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

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

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);
};

EDIT: найдено решение Вместо этого используется поток управления без контейнера

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

input foreach internet-explorer knockout.js
person Seth Micalizzi    schedule 02.02.2012    source источник
comment
Я думаю, проблема в том, что браузеры принудительно помещают tbody в DOM, потому что это необязательный элемент, но предполагается, что он будет там, если вы просто используете tr внутри своей таблицы, см. здесь: w3.org/TR/html5/syntax.html#Optional-tags   -  person Paul Tyng    schedule 03.02.2012

Ответы (2)


arrow_upward
6
arrow_downward

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

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

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

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

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

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

person saurus    schedule 03.02.2012

arrow_upward
0
arrow_downward

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

person Maarten Docter    schedule 02.02.2012
comment
Привет, я создал этот jsfiddle http://jsfiddle.net/jBb8G/4/ и запустил его в моем IE9 работает в IE8 browsermodus без проблем. Должен признать, это не лучший тест. Можете ли вы сообщить мне, если проблема все еще возникает в вашем IE8? - person Maarten Docter; 03.02.2012