检索动态添加的元素

Question

示例取自knockout tutorials - working with lists and collections。

<table>
  <thead>
    <tr>
        <th>Passenger name</th>
        <th>Meal</th>
        <th>Surcharge</th>
        <th></th>
    </tr>
  </thead>
  <!-- Todo: Generate table body -->
  <tbody data-bind="foreach: seats">
    <tr>
        <td>
            <input data-bind="value: name" />
        </td>
        <td>
            <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select>
        </td>
        <td data-bind="text: formattedPrice"></td>
        </td>
    </tr>
  </tbody>
</table>

<button data-bind="click: addSeat">Reserve another seat</button>

ReservationsViewModel() 将一行元素动态添加到静态table on button（保留另一个座位）单击绑定到addSeat 和click 事件侦听器。

function ReservationsViewModel() {
   var self = this;
   ...        
   self.addSeat = function () {
       self.seats.push(new SeatReservation("", self.availableMeals[0]));
   }
   ...
}

致电SeatReservation()

function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}

如何从SeatReservation()中的DOM（不是点击的元素）中检索添加的元素。

编辑：据我了解淘汰赛的foreach 绑定，它重复子元素。我想要实现的是，一旦将这些元素添加到 DOM 中，就可以访问它们。

fiddle

Answer 1

您可以在foreach 绑定中使用afterRender 等后处理属性。

请参阅http://knockoutjs.com/documentation/foreach-binding.html 上的注释 7

afterRender 回调需要在您的主视图模型上定义，但由于它是作为参数传递当前数据项，您可以使用它来调用 SeatReservation 上的函数并传递 DOM 元素.

<tbody data-bind="foreach: { data: seats, afterRender: afterSeatRender }">

function SeatReservation(name, initialMeal) {
    // ...
    self.afterRender = function (elements) {
        $(elements).css('background-color', 'green');
    };
}

function ReservationsViewModel() {
    // ...
    self.afterSeatRender = function (elements, seat) {
        seat.afterRender(elements);
    };
}

这是一个更新的小提琴：http://jsfiddle.net/4J3Pf/2/

话虽如此，Knockout 的全部意义在于使用数据绑定而不是直接操作 DOM。 Knockout 文档清楚地表明这不是一个正常的用例：

这些回调仅用于触发与列表更改相关的动画。

特别是，在 SeatReservation 视图模型中操作 DOM 是错误的设计。尽量让你的视图模型和你的视图渲染代码分开。

Answer 2

有了这个binding handler：

ko.bindingHandlers.selectmenu = {
    init: function (element, valueAccessor, allBindings, viewModel, context) {
        $(element).parent().trigger("create");
        //you can customize the code depending on valueAccessor and allBindings
        //here
    }    
}

这样使用：

<select data-bind="selectmenu: {option1: optFromModel1, option2: optFromModel2}, 
                   options: $root.availableMeals, 
                   value: meal, 
                   optionsText: 'mealName'"></select>

它是works（你可以用ready替换pagebeforecreate）

选择菜单更新来源：https://forum.jquery.com/topic/no-style-to-dynamic-select-element