obserwować zmiany dla obiektu w Polymer JS

Question

Mam element z obiektu modelu, który chcę obserwować tak:

<polymer-element name="note-editor" attributes="noteTitle noteText noteSlug"> 
    <template> 
    <input type="text" value="{{ model.title }}"> 
    <textarea value="{{ model.text }}"></textarea> 
    <note-ajax-button url="/api/notes/" method="POST" model="{{model}}">Create</note-ajax-button> 
    </template> 

    <script> 
    Polymer('note-editor', { 
     attached: function() { 
     this.model = { 
      title: this.noteTitle, 
      text: this.noteText, 
      slug: this.noteSlug 
     } 
     }, 
    }); 
    </script> 
</polymer-element> 

Chcę obserwować zmiany w modelu, ale widocznie to nie jest możliwe użycie modelChanged oddzwanianie w elemencie i ani w elemencie note-ajax-button. Co jest nie tak? Jak mogę to zrobić?

Próbowałem obserwować pola oddzielnie, ale w ogóle nie było to czyste. Stan elementu przycisku, który tam widzisz, powinien się zmienić w zależności od stanu modelu, więc muszę obejrzeć zmiany dla obiektu, a nie właściwości. Dzięki!

Answer 1

Aby obserwować ścieżki w obiekcie, trzeba użyć observe bloku:

Polymer('x-element', { 
    observe: { 
    'model.title': 'modelUpdated', 
    'model.text': 'modelUpdated', 
    'model.slug': 'modelUpdated' 
    }, 
    ready: function() { 
    this.model = { 
     title: this.noteTitle, 
     text: this.noteText, 
     slug: this.noteSlug 
    }; 
    }, 
    modelUpdated: function(oldValue, newValue) { 
    var value = Path.get('model.title').getValueFrom(this); 
    // newValue == value == this.model.title 
    } 
}); 

http://www.polymer-project.org/docs/polymer/polymer.html#observeblock

Answer 2

Albo można dodać dodatkowy atrybut dla modelu o nazwie na przykład „odświeżania” (logiczna) Za każdym razem, gdy modyfikujesz niektóre z wewnętrznych wartości, modyfikuj je po prostu przez ustawienie refresh =! refresh, możesz zaobserwować tylko jeden atrybut zamiast wielu. Jest to dobry przypadek, gdy model zawiera wiele atrybutów zagnieżdżonych.

Polymer('x-element', { 
    observe: { 
    'model.refresh': 'modelUpdated' 
    }, 
    ready: function() { 
    this.model = { 
     title: this.noteTitle, 
     text: this.noteText, 
     slug: this.noteSlug, 
     refresh: false 
    }; 
    }, 
    modelUpdated: function(oldValue, newValue) { 
    var value = Path.get('model.title').getValueFrom(this); 
    }, 
    buttonClicked: function(e) { 
    this.model.title = 'Title'; 
    this.model.text = 'Text'; 
    this.model.slug = 'Slug'; 
    this.model.refresh = !this.model.refresh; 
    } 
}); 

Answer 3

co zrobić w tej sytuacji jest używać * char obserwować wszelkie zmiany własności w moim tablicy, tutaj przykład mojego obiektu JSON:

{ 
    "config": { 
     "myProperty":"configuraiont1", 
     "options": [{"image": "" }, { "image": ""}] 
    } 
}; 

utworzyć metodę _myFunctionChanged i przekazać jako parametr config.options. * następnie co własności wewnątrz tablicy opcje jest obserwowane w funkcji _myFunctionChanged

Polymer({ 
observers: ['_myFunctionChanged(config.options.*)'] 
}); 

Możesz użyć tego samego wzorca z obiektem, zamiast tego użyć tablicy, takiej jak config.options. można po prostu obserwować konfigurację .