javascript - Knockout 可观察数组不会重新呈现我的列表

Question

我在这里需要一些帮助:https://jsfiddle.net/vhaurnpw/

我想做一个简单的列表，它可以通过顶部的输入进行过滤并自行更新..

JS/knockout :

var viewModel = {
    query: ko.observable(''),
    places: ko.observable(data),

    search: function(value) {
        viewModel.places = [];
        console.log(value)

        for (var i = 0; i < data.length; i++) {

            if(data[i].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
                viewModel.places.push(data[i]);
            }
                console.log(viewModel.places);
        }
    }
};

viewModel.query.subscribe(viewModel.search);

ko.applyBindings(viewModel);

HTML:

<form acion="#" data-bind="submit: search">
<input placeholder="Search" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
</form>

<ul data-bind="foreach: places">
  <li>
     <span data-bind="text: name"></span>
  </li>
</ul>

列表将被渲染，但当您输入内容时，它不会显示结果。

相反，当您查找控制台时，您会看到 console.log 并且它更新得很好!

那么我该如何刷新我的 HTML？ :(

Answer 1

您的代码中存在以下问题。

1. places 需要是一个 ObservableArray 而不是一个 Observable，这样您就可以跟踪 Observable 数组的添加/删除。因此，更改代码 From places: ko.observable(data) To places: ko.observableArray(data),
2. viewModel.places 是函数，因此当您分配另一个值(例如 viewModel.places = [])时，它会将一个空数组分配给 viewModel.places。为了修改 viewModel.places 的值，您需要像 viewModel.places([]);
这样的函数调用它

注意:如果文本框被清除，您的代码不会添加回数据，我希望您已找到问题的解决方案，并且您也可以解决此问题。

完整的工作代码:

var data = [
			{ name: 'Isartor'},
			{ name: 'Sendlinger Tor'},
			{ name: 'Marienplatz'},
			{ name: 'Stachus'},
			{ name: 'Bayerischer Rundfunk'},
			{ name: 'Google München'},
			{ name: 'Viktualienmarkt'},
			{ name: 'Museumsinsel'},
			{ name: 'Tierpark Hellabrunn'},
			{ name: 'Allianz Arena'},
			{ name: 'Olympia-Park'},
			{ name: 'Flaucher-Insel'}
					];

var viewModel = {
		query: ko.observable(''),
		places: ko.observableArray(data),

		search: function(value) {
			viewModel.places([]);
			console.log(value)

			for (var i = 0; i < data.length; i++) {

				if(data[i].name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
					viewModel.places.push(data[i]);
				}
					console.log(viewModel.places);
			}
		}
};

viewModel.query.subscribe(viewModel.search);

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<form acion="#" data-bind="submit: search">
  <input placeholder="Search" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off">
</form>

<ul data-bind="foreach: places">
    <li>
      <span data-bind="text: name">asd</span>
    </li>
</ul>