Input value is not initialised.

[treshugart]

Given the following element and accompanying model, the input is not initialised with the default title of "asdf".

<polymer-element name="todo-list">
  <template>
    <form>
      <input id="title" type="text" value="{{ title }}" placeholder="New Todo Title">
      <button type="button" on-click="add">Add</button>
    </form>
    <ul>
      <template repeat="{{ todos }}">
        <li>{{ title }}</li>
      </template>
    </ul>
  </template>
  <script>
    Polymer('todo-list', {
      title: 'asdf',
      todos: [],
      add: function() {
        this.todos.push({ title: this.title });
        this.$.title.value = '';
      }
    });
  </script>
</polymer-element>

[sjmiles]

Unfortunately, title is a native property on HTMLElement, so you cannot currently override it successfully (aka put a title property in your prototype).

Change the name title to something else (e.g. caption) and that should fix the problem.

[treshugart]

Sweet, thanks. That's was unclear because I wasn't using title as part of an HTMLElement but only in the model (and to retrieve it by its id). This seems then that Polymer is storing model data as attributes on an HTMLElement?

[sjmiles]

Yes, the view-model for an element is itself. That doesn't mean it has to be the same as your business-model (so to speak), but you can hang business-model objects off of the element to make them accessible in the view.

[treshugart]

That's so rad! I just wrote a test for this and it works. I had thought to use element.model.title since in the documentation it sets the model property to initialise the model in one of the examples but didn't see anywhere how to access the properties themselves, hence my confusion.

Thanks again!