Двухстороннее связывание данных между полимерным компонентом и моделью?

Question

Прежде чем использовать Polymer, я хотел бы проверить, что возможно сделать двухстороннюю привязку данных между компонентом и javascript-моделью. Я прочитал раздел привязки данных на веб-сайте, но этот момент до сих пор не ясен.

Простой пример: если у меня есть «аудио» модель с «томом» в javascript, могу ли я привязать это свойство тома к ползунку, например?

Я больше знаком с JavaFx, и здесь обычно используется код JavaFx, который бы сделал трюк: slider.valueProperty().bindBidirectional(audio.volumeProperty()). После выполнения любые изменения, сделанные пользователем на ползунке, отражаются на модели, а также любые изменения, сделанные приложением на модели, отражаются на слайдере.

Так что теперь в javascript, если у меня есть var audio = { volume: 75, ... }, можно ли связать свойство тома этой модели, например, значение бумажного слайдера?

Answer 1

Да, это возможно. Вот вам пример, с помощью простой модели:

<template is="auto-binding"> 
    <paper-slider min="10" max="200" value="{{audio.volume}}"></paper-slider> 
    <h1>Current volume: {{audio.volume}}</h1> 
</template> 

<script> 
    var audio = {volume: 42, stereo: true, title: "A beautiful song"}; 

    var template = document.querySelector('template[is="auto-binding"]'); 

    template.audio = audio 

    template.status =0; 
    template.statusIsOn = function(value) { 
    if (value.status >0) 
     return value.count; 
    return 0; 
    }; 
</script> 

У вас есть рабочий Plunker здесь: http://plnkr.co/edit/YkyHRIn9ETrNz0vGTPK6?p=preview

Если вам нужна дополнительная информация, не стесняйтесь спрашивать!