knockout datatable binding with remove element

Question

Я пытался связать свои данные с нокаутом js. У меня есть кнопка для добавления элемента в наблюдаемый массив, который эффективно обновляет таблицу. И для каждой строки у меня кнопка удаления, проблема в том, что я могу сначала удалить элемент, а затем обновить таблицу. После этого кнопка удаления не работает. Если я добавлю элемент и щелкнув, чтобы удалить какой-либо другой элемент, то удаление, похоже, не работает. Странно, если я сортирую или просматриваю таблицу (то есть обновляю ее), удаление кажется работающим во второй раз.

Вот мой код

<script id="sample2RowTemplate" type="text/html"> 
<td> <label data-bind="text: Id" /></td> 
     <td> <input type="text" data-bind="value: Title" /></td> 
     <td> <input type="text" data-bind="value: Price" /></td>  
     <td><a data-bind="click: function() { vm.removeGift($data); }">Remove</a></td> 
    </script> 

И:

var initialData = [{ 
    Id: 1, 
    Title: 'Star Wars Blue Ray', 
    Price: '90.00'}]; 
var initCounter = 1; 

//define record class 

function GiftRecord(id, title, price) { 
    this.Id = ko.observable(id); 
    this.Title = ko.observable(title); 
    this.Price = ko.observable(price); 
} 

//map the records 
var mappedData = ko.utils.arrayMap(initialData, function(item) { 
    return new GiftRecord(item.Id, item.Title, item.Price); 
}); 

//Build viewModel 

function viewModel() { 
    this.gifts = ko.observableArray(mappedData); 
    this.addGift = function() { 
     initCounter += 1; 
     var title = $("#newTitle").val(); 
     var price = $("#newPrice").val(); 
     var rec = new GiftRecord(initCounter, title, price); 
     this.gifts.push({ 
      Id: rec.Id, 
      Title: rec.Title, 
      Price: rec.Price 
     }); 
    }; 
    this.removeGift = function(gift) { 
     this.gifts.remove(function(item2) { 
      return gift.Id == item2.Id; 
     }); 
    }; 

    this.testUpdate = function() { 
     this.gifts()[0].Title("test123"); 
    }; 

    this.save = function() { 
     ko.utils.postJson(location.href, { 
      gifts: ko.toJS(this.gifts()), 
      guid: giftsSignalR.guid 
     }); 
    }; 
} 
vm = new viewModel(); 
//Bind viewModel to HTML 
$(function() { 
    ko.applyBindings(vm, $("#sample2")[0]); 
}); 

, который в основном такой же, как и в: http://jsfiddle.net/bdetchison/b4SsE/

Пожалуйста, помогите ....

Answer 1

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

http://jsfiddle.net/beauxjames/RYUHy/1/

Теперь ... взять его в немного другом направлении, я хотел бы сделать следующее ::

http://jsfiddle.net/beauxjames/RYUHy/

В этой модели Я полностью снятую ссылку на DOM из моделей. Кроме того, обратите внимание на вызов ko.mapping и посмотрите, как добавляются подарки, но их свойства также автоматически наблюдаются. Было небольшое изменение в исходных данных, и я завернул массив подарков в именованный объект ... который дал мне возможность иметь родительскую модель и сохранить подарки в детстве.

var initialData = { 'gifts' : [ ... ] }; 

var giftMapping = { 
    'gifts': { 
     create: function (options) { 
      if (options.data != null) return new GiftModel(options.data); 
     } 
    } 
} 

Добавление нового подарка больше не зависит от ссылок на поля ввода из соответствующей модели представления. Я развернул свойство newGift в родительской модели и привязал элементы управления формами к этому, используя атрибут data-bind = "with: newGift". Поскольку я сделал это, мне пришлось объявить и инициализировать свойства в модели подарков ... в противном случае я мог бы оставить их. Они были бы инициализированы исходными данными в качестве наблюдаемых.

var GiftModel = function(data) { 
    var self = this; 
    self.Id = ko.observable(); 
    self.Title = ko.observable(); 
    self.Price = ko.observable(); 
    ko.mapping.fromJS(data, {}, self); 
} 

В любом случае, надеемся, что это поможет и даст вам новый способ взглянуть на @ вещи. Я рассматриваю эти методы как более распространенные, так как движение к платформам, таким как угловой старт, складывается.