Вызов функции при выбранном изменении индекса - PullRequest
Новая
       20

Вызов функции при выбранном изменении индекса

2 голосов
/ 25 августа 2011

Как связать функцию с выбранным изменением индекса, аналогично привязке функции к событию нажатия на кнопку?

Причина, по которой мне это нужно, в том, что у меня есть этот шаблон, который должен повторяться 'n' количество раз. Этот 'n' выбран из выпадающего списка.

Как я могу сделать это, используя библиотеку knockoutJS, так как она принимает только объекты списков / массивов в своем атрибуте foreach в структуре шаблона?

Ответы [ 2 ]

1 голос
/ 20 апреля 2012

Лучший выбор сейчас - использовать функцию диапазона, которая принимает начальное и конечное значения и возвращает массив с этими числами. Я, например, использую функцию диапазона в библиотеке underscore . 

var numArray = _.range(0, 5); //returns [0, 1, 2, 3, 4]

Используйте это с нокаутом вот так. 

<div data-bind="template: { name: 'myTemplate', foreach: _.range(0, 5) }">
</div>

Внутри шаблона вы можете захватить текущее число, используя '$ data', и использовать его как индекс. 

<div>Index: <span data-bind="text: $data"></span></div>
<div>My Object Prop: <span data-bind="text: viewModel.MyObjects[$data].MyProp"></span></div>

Если вы хотите выполнить простую итерацию, как в предыдущем примере, вам следует выполнять итерацию по объекту напрямую, а не по подходу индексации массива. Однако, если вам нужно сделать что-то причудливое, эта техника поможет вам.

Например, если вам нужно отобразить список объектов в наборах по 2, вы можете сделать это. 

<div data-bind="foreach: _.range(0, viewModel.MyObjects().length, 2)">
  <div>
    <div data-bind="template: { name: 'myTemplate', data: viewModel.MyObjects()[$data] }"></div>
    <div data-bind="template: { name: 'myTemplate', data: viewModel.MyObjects()[$data + 1] }"></div>
  </div>
</div>
1 голос
/ 26 августа 2011

Это может сработать для вас.HTML выглядит так: 

<select id="mySelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="4">4</option>
</select>

<table>
    <thead>
        <tr>
            <th></th>
            <th>name</th>
            <th>price</th>
        </tr>
    </thead>
    <tbody data-bind="template: {name:'tempTemplate', foreach:  tempCollection}">
    </tbody>
</table>

и для JavaScript: 

<script type="text/javascript">
    function temp(name, price ){
        return {name: ko.observable(name),
                price: ko.observable(price)
        };
    }

    $(document).ready(function () {
        var viewModel = {
            tempCollection : ko.observableArray([{ name: "Tall Hat", price: "39.95" }]),
            addTemp: function () { this.tempCollection.push(temp("new","price")) },
            removeTemp: function (temp) { this.tempCollection.remove(temp) }

        };
        ko.applyBindings(viewModel);

        $("#mySelect").change(function() {
            var len = viewModel.tempCollection().length;
            for (var i = 0; i < len; i++) {
                viewModel.removeTemp(viewModel.tempCollection()[0]);
            }
            for (var i = 0; i < $(this).val(); i++) {
                viewModel.addTemp();
            }
        });
});
</script>

<script id="tempTemplate" type="text/html">
    <tr>
        <td><span data-bind="text: name" /></td>
        <td><span data-bind="text: price" /></td>
    </tr>
</script>
...