Foreach работает с шаблоном, но прерывается без шаблона

ProgramBox

Foreach работает с шаблоном, но прерывается без шаблона

Post author:admin
Запись опубликована:25 февраля, 2023
Post category:Вопросы по программированию

#javascript #templates #knockout.js #foreach

#javascript #шаблоны #knockout.js #foreach

Вопрос:

У меня есть следующий код, который загружает данные для модели представления через AJAX и отображает их:

 <tbody id="filtered-table" data-bind="template: {name:'asset', foreach:assets}">

</tbody>

И шаблон выглядит так:

 <script type="text/html" id="asset">
<tr>
    <td style="vertical-align: middle" data-bind="text: id">amp;nbsp;</td>

    <td><img data-bind="attr:{ src: '/manager/files/'   poster }" height="100px" /></td>
    <td style="vertical-align: middle"><span dir="auto" data-bind="text: name"></span></td>
    <td style="vertical-align: middle" data-bind="text: category"></td>
    <td style="vertical-align: middle" data-bind="text: type"></td>
    <td style="vertical-align: middle" data-bind="text: popup"></td>

</tr>
</script>

И все работает нормально.

Проблема в том, что я не хочу использовать шаблон, вместо этого я хочу изменить foreach связанный элемент, выглядящий следующим образом:

 <tbody id="filtered-table" data-bind="foreach: assets, visible: assets().length > 0">
    <tr >
        <td style="vertical-align: middle" data-bind="text: id">amp;nbsp;</td>
        <td><img data-bind="attr:{ src: '/manager/files/'   poster }" height="100px" /></td>
        <td style="vertical-align: middle"><span dir="auto" data-bind="text: name"></span></td>
        <td style="vertical-align: middle" data-bind="text: category"></td>
        <td style="vertical-align: middle" data-bind="text: type"></td>
        <td style="vertical-align: middle" data-bind="text: popup"></td>
    </tr>
</tbody>

Несмотря на то, что я ничего не менял в модели представления (я просто извлек html-элементы из шаблона и поместил их в привязанный элемент foreach) Я получаю следующую ошибку:

Uncaught Error: Unable to parse binding attribute.
Message: ReferenceError: id is not defined;
Attribute value: text: id

Я был бы очень признателен, если бы кто-нибудь мог объяснить, что я делаю неправильно. ТИА!

Вот часть кода ViewModel и Ajax:

 $(function() {
  $.ajax({
        url: '/Assets/getJson/',
        type: "GET",
        dataType: 'json',
        async: false,
        contentType: "application/json",
        success: function (data) {
            console.log(data);
            var viewModel = new ViewModel(data);

            ko.applyBindings(viewModel);
        }
    });
});

function ViewModel(assets) {
  var self = this;

  self.assets = ko.observableArray(assets);
  self.allAssets = assets;
  self.query = ko.observable('');

  self.search = function(value) {
      self.assets.removeAll();
      for(var x in self.allAssets) {
        if(self.allAssets[x].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
          self.assets.push(self.allAssets[x]);
        }
      }
  };

  self.query.subscribe(self.search);
}

Вот фрагмент данных ответа (1-й результат):

 {"id":"2","name":"u05d9u05e0u05d8u05dc","poster":"Pic011.jpg","category":null,"type":"Movie","popup":null}

1. Можете ли вы опубликовать свой код viewmodel или ваши данные, полученные из AJAX, выглядят так? я вижу, что в вашем коде шаблона нет id привязки атрибута, но в вашем элементе foreach есть атрибут id, может быть, вам не хватает вашего элемента id в ваших извлеченных данных?

2. У меня есть проверка, и у меня демонстративно есть элемент ID в моих удаленных данных

3. Опубликованный вами код, похоже, работает нормально . Пожалуйста, включите код таким образом, чтобы он был минимальным воспроизведением , возможно, даже подкрепленным скрипкой.

4. Да, когда данные не загружаются ajax, кажется, что все работает: jsfiddle.net/eCLQK Я не знаю, как выполнять ajax-запросы в jsFiddle, но в моем коде я попробовал это со статическим массивом и ajax, статический массив работал, при загрузке данных через AJAX он не работал. Проблема, по-видимому, заключается в том, что наблюдаемый массив заполняется после завершения запроса ajax.

Ответ №1:

Ваш шаблон включает в себя эту строку:

 <td style="vertical-align: middle" data-bind="text: type">amp;nbsp;</td>

Эквивалентная строка в коде, отличном от шаблона:

 <td style="vertical-align: middle" data-bind="text: id">amp;nbsp;</td>

При его копировании вы, похоже, изменили type на id . Попробуйте изменить его обратно type и посмотреть, работает ли это.