KnockoutJs beta 3.0 - Как уничтожить дочерние элементы? - PullRequest
Новая
       13

KnockoutJs beta 3.0 - Как уничтожить дочерние элементы?

0 голосов
/ 19 октября 2011

В настоящее время у меня есть настройки, которые выглядят так: 

    ko.applyBindings(viewModel);

    $(".removeButton").live("click", function() {
        viewModel.ProductCategories.destroy(ko.dataFor(this));
    });

    $(".renameButton").live("click", function() {
        ko.dataFor(this).Name("Renamed Successfully!");
    });

Это работает нормально для меня, пока я не представлю концепцию дочерних элементов. В этот момент событие удаления больше не работает для этих элементов.

Есть ли более общий способ "уничтожения" элемента?

KO, очевидно, знает элемент, на который я нажимаю (как я могу переименовать). 

[{"Id":1,"Name":"Bikes","Parent":null,"Children":[{"Id":5,"Name":"Mountain Bikes","Parent":1,"Children":null},{"Id":6,"Name":"Road Bikes","Parent":1,"Children":null},{"Id":7,"Name":"Touring Bikes","Parent":1,"Children":null}]},{"Id":2,"Name":"Components","Parent":null,"Children":[{"Id":8,"Name":"Handlebars","Parent":2,"Children":null},{"Id":9,"Name":"Bottom Brackets","Parent":2,"Children":null},{"Id":10,"Name":"Brakes","Parent":2,"Children":null},{"Id":11,"Name":"Chains","Parent":2,"Children":null]}]

Все вышеперечисленные события будут работать с любым элементом (дочерним или другим), за исключением удаления, которое работает только с корневыми элементами.

Могу ли я вызвать remove для самого элемента или мне придется добавить какой-нибудь способ выяснить, где он находится внутри массива, и уничтожить его таким образом?

например; это предпочтительно: 

    $(".removeButton").live("click", function() {
        ko.dataFor(this).destroy();
    });

к этому: 

    $(".removeButton").live("click", function() {
          viewModel.ProductCategories[someindex].Children.destroy(ko.dataFor(this));
    });

Спасибо, Кохан

1 Ответ

4 голосов
/ 19 октября 2011

Основная проблема - определение родительского массива при попытке уничтожить элемент.

Несколько вариантов: Вместо ko.dataFor вы можете использовать ko.contextFor, который будет возвращать объект, который включает свойства, такие как $data, $parent, $parents и $root.

Если ваши массивы имеют одинаковые имена, вы можете сделать что-то вроде: http://jsfiddle.net/rniemeyer/xJjK8/

Если ваши массивы имеют разные имена, вы можете добавить подсказку к элементу кнопки, чтобы понять имя родителя, например: http://jsfiddle.net/rniemeyer/arpNx/

В противном случае, если вы действительно хотите, чтобы он был универсальным, вы могли бы использовать привязку with для принудительной установки блока области действия, который позволил бы вам получить доступ к родительскому массиву через $parent. Тем не менее, это будет развернутый массив, и мы действительно хотим использовать массив observableArray. С некоторой дополнительной работой вы могли бы пройтись по свойствам родительского родительского объекта и сравнить базовый массив с вашим развернутым массивом, чтобы найти фактический массив observableArray, который вы хотели бы вызвать destroy с вашим элементом. Как это: http://jsfiddle.net/rniemeyer/bBVrE/

Наконец, если вы позаботитесь о том, как создаются ваши объекты, вы можете передать функцию уничтожения самому элементу, вместо того, чтобы обращаться непосредственно к родителю. Вот пример, показывающий добавление метода destroyMe к объекту, который использует родительский элемент, который был передан в функцию конструктора: http://jsfiddle.net/rniemeyer/Eeryh/

...