javascript - 无法使用 Knockout JS 绑定(bind)静态数据

Question

因此，我加载页面，并且列表项具有唯一的 ID。

  <ul class="list-group" data-bind="template: { name: 'item-template', data: $root.items}">
    <li class="list-group-item">
      <span id="123" data-bind="text: item_name, attr: {'id': item_id}">Americanino</span>
      <span class="glyphicon glyphicon-remove-circle" data-bind="click: $parent.removeItem"></span>
    </li>      

    <li class="list-group-item">
      <span id="223" data-bind="text: item_name, attr: {'id': item_id}">Asos</span>
      <span class="glyphicon glyphicon-remove-circle" data-bind="click: $parent.removeItem"></span>
    </li>            
  </ul>

我在页面加载后绑定(bind)属性

jQuery(document).ready(function($) {

  var itemListModel = function() {
    (...)
    self.item_id = ko.observable();
    (...)
  }

  ko.applyBindings(new itemListModel());
});

但是当我尝试删除从服务器加载的列表项时

// Remove item
self.removeItem = function(item) {
    alert(self.item_id());
    //self.items.remove(item);
}

那么我就无法检索 ID。

如果我添加一个新项目，那么我可以获得 ID。但是，如果我也单击任何其他列表项，我也会获得相同的 ID。

那么如何绑定(bind)“静态”内容？
我的隐藏输出也有 data-bind="value: item_id" 是否有问题？

See my fiddle here

Answer 1

修改您的 create_list 方法

function create_list(exiting_list){
var arr_list = [];

$(exiting_list).find('li').each(function(e,li){
    var id = $(li).find('span').prop('id');
    var name = $(li).find('span').html();
    arr_list.push(new item(id, name));
});
return arr_list;

}

在这里更新了 fiddle - http://jsfiddle.net/sherin81/JF55A/10/

实现了排序的解决方案..更新了Fiddle - http://jsfiddle.net/sherin81/JF55A/11/