Question

我有以下代码通过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">&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">&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 binded元素中），我收到以下错误：

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

如果有人能解释我做错了什么，我会非常感激。 TIA！

这是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":"\u05d9\u05e0\u05d8\u05dc","poster":"Pic011.jpg","category":null,"type":"Movie","popup":null}

Answer 1

您的模板包含以下行：

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

非模板代码中的等效行：

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

在复制时，您似乎已将type更改为id。尝试将其更改回type并查看是否有效。

Foreach使用模板，但没有模板中断

1 个答案: