淘汰赛观察到的数组不会重新渲染我的名单

我需要一些帮助在这里：https://jsfiddle.net/vhaurnpw/淘汰赛观察到的数组不会重新渲染我的名单

我想做一个简单的列表，这是在顶部和更新自身的输入过滤..

JS /基因敲除：

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？ :(

来源

2017-02-22 Shouldz

通过调用它们可观测值。这行'viewModel.places = [];'需要'viewModel.places（[]）''。 – user3297291

谢谢！那个和可观察的阵列得到它的工作！ – Shouldz

有以下代码中的问题。

places需求是一个ObservableArray，而不是可观察到的，这样就可以追踪从可观察阵。所以，改变代码的添加/删除从places: ko.observable(data)要places: ko.observableArray(data),
viewModel.places是功能，所以当你像指定另一个viewModel.places = []值，它分配一个空数组到viewModel.places。为了修改viewModel.places的价值，你需要把它调用一个函数升IKE viewModel.places([]);

注：您的代码不会添加回数据的情况下，该文本框被清除，我希望你有解决这个问题，你可以解决这个问题为好。

完整的工作代码：

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

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

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

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

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

 
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>

来源

2017-02-22 17:05:03 Agalo

谢谢，这样做！它很棒！ – Shouldz

淘汰赛观察到的数组不会重新渲染我的名单

回答

相关问题