Динамические значения в привязке шаблона Knockout

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

    <div class="cond" title="Click to flip">
        <div class="condFlip" data-bind="attr: {id: Id }, click: viewModel.setClick">               
            <div class="piece-all piece" data-bind="attr: {style: background-position: viewModel.getValue($index)  viewModel.getValue($index) }"></div>
        </div>
    </div>      
</script>

<script type="text/javascript">
    viewModel = {
        flips: ko.observableArray([]),      

        setClick: function (data, e) {
            e.preventDefault();
            //doing things
        },

        getValue: function (data, e) {
            return //get my value
        }        
    };    

ko.applyBindings(viewModel);

so how can i use function viewModel.getValue in model binding? is there any way of doing this?


knockout.js knockout-2.0
person angularrocks.com    schedule 27.08.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете вызывать функции, которые возвращают строки так, как вы это делаете, но ваш формат немного отличается. Вот несколько советов:

  • вы можете использовать привязку style, а не привязку attr, так как она добавит/удалит индивидуальный стиль, а не заменит атрибут стиля целиком (возможно, это не важно для вашего случая).

  • в строке привязки background-position — это недопустимое имя свойства в литерале объекта, который вы создаете для указания привязок. Вам нужно либо использовать "background-position" в кавычках, либо имя, которое вы можете использовать в JavaScript backgroundPosition

  • вы либо хотите, чтобы ваша функция getValue возвращала полную строку, например 15px 30px, либо встраивала ее в привязку, например: getValue($index) + ' ' + getValue($index)

  • $index является наблюдаемым, поэтому вам нужно будет вызвать его как функцию, чтобы получить его значение, когда вы обрабатываете его в своей функции.

Итак, ваша привязка может выглядеть так:

<i class="icon-blah" data-bind="style: { backgroundPosition: viewModel.getValue($index) + ' ' + viewModel.getValue($index) }"></i>

Образец здесь: http://jsfiddle.net/rniemeyer/BAVZa/

person RP Niemeyer    schedule 28.08.2012