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（保留另一个座位）点击与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

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

请参阅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（您可以将pagebeforecreate替换为ready）

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

检索动态添加的元素

2 个答案: