Сетка кендо, нокаут vm и шаблоны рядов

У меня есть сетка KendoUI, привязанная к ko vm

Из-за особых требований (значки в некоторых столбцах, ссылки и т. д.) мне нужно определить rowTemplate, который я определяю как шаблон ko.

Но я также хочу иметь нормальные и чередующиеся строки в разных цветах bg.

Из-за этого я определил два идентичных шаблона, как показано ниже.

        <script id="rowTmpl" type="text/html">
            <tr role="row" >         
                <td align="center">
                    <a data-bind="attr: { href: 'scrccc_checkEdit.aspx?id=' + CheckID }" >
                        <img src="images/icon-edit.gif" border="0" alt="Edit/View Check" />
                    </a>
                </td>
                <td data-bind="text: CheckNumber"></td>
                ....
            </tr>
        </script>
        <script id="altTmpl" type="text/html">
            <tr class="k-alt" role="row">
                <td align="center">
                    <a data-bind="attr: { href: 'scrccc_checkEdit.aspx?id=' + CheckID }" >
                        <img src="images/icon-edit.gif" border="0" alt="Edit/View Check" />
                    </a>
                </td>
                <td data-bind="text: CheckNumber"></td>
                ....
            </tr>
        </script>

В основном эти два шаблона идентичны, за исключением того, что шаблон alt имеет class class="k-alt" примененный к строке таблицы.

Но такой подход очень плох, потому что дублирует всю разметку для шаблона строки.

Как лучше выполнить то, что мне нужно?

Спасибо


kendo-grid templates kendo-ui knockout.js knockout-kendo
person bzamfir    schedule 08.12.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

если вы хотите изменить только стиль альтернативной строки, вы можете увидеть образец здесь: http://jsfiddle.net/P5EQt/

HTML

<div data-bind="kendoGrid: { data: items, rowTemplate: 'rowTmpl', useKOTemplates: true }"> </div>
<button data-bind="click: addItem">Add Item</button>
<script id="rowTmpl" type="text/html">
    <tr data-bind="css:{strong:id%2===0}">
        <td data-bind="text: id"></td>
        <td>
            <input data-bind="value: name" />
        </td>
        <td>
            <a href="#" data-bind="click: $root.removeItem">x</a>
        </td>
    </tr>
</script>

Javascript

var ViewModel = function() {
    this.items = ko.observableArray([
        { id: "1", name: ko.observable("apple")},
        { id: "2", name: ko.observable("orange")},
        { id: "3", name: ko.observable("banana")}
    ]);

    this.addItem = function() {
        var num = this.items().length + 1;
        this.items.push({ id: num, name: "new" + num});
    };

    this.removeItem = function(item) {
        this.items.remove(item);
    }.bind(this);
    };
ko.applyBindings(new ViewModel());

CSS

.strong { background-color:red; }

Использование нокаутной привязки css с условием id (в моем образце), которое отличает альтернативную строку

person Goddard    schedule 09.12.2013
comment
Спасибо. Однако это не может относиться к моему случаю, потому что мои идентификаторы не являются последовательными. Я получил еще один ответ, который указал мне правильное направление - использовать jQuery($element).closest('tr').index(). Другой вопрос в stackoverflow.com/questions/20457426/ - person bzamfir; 10.12.2013

arrow_upward
1
arrow_downward

Я смог добиться этого, используя селектор «JQuery даже». Я добавил код в свойство с привязкой к данным моего определения сетки. Вот как это выглядит.

ЯВАСКРИПТ

    var myGridDefinition = {
        columns: {...}
        dataBound: {
            $("#myGridId .k-grid-content tr:even").addClass("k-alt");           
        }       
    }

HTML

    <div id="myGridId" data-bind="kendoGrid: myGridDefinition"></div>
person wavedrop    schedule 07.01.2014

arrow_upward
0
arrow_downward

Можно также создать свойство AltRow и метод IsAltRow() на виртуальной машине и использовать функцию привязки данных css.

var vm = function () {
    var self = this;    
    this.AltRow = true;
    this.IsAltRow = function () {
         self.AltRow = !self.AltRow;
         return self.AltRow;
    }
}

<script id="rowTmpl" type="text/html">                    
    <tr data-bind="css: { 'k-alt': $root.IsAltRow() === true }">
         <td>
              ...
         </td>                        
    </tr>
</script>

Я также пытался использовать функцию вычисляемых свойств KO, но она выдавала ошибки, не знаю почему. Но это решение сработало отлично.

person Zoran    schedule 17.02.2014