Geek asks and answers

Backbone.js Update View Disorder

Given the model:

MyModel = Backbone.Model.extend({
  defaults: {
    name: '',
    age: -1,
    height: '',
    description: ''
  }
});

and a view for displaying the model as a list:

MyView  = Backbone.View.extend({
  tagName: 'ul',
  className: 'MyView',

  render() {
    var values = {
      name: this.model.get('name'),
      age: this.model.get('age'),
      height: this.model.get('height'),
      description: this.model.get('description')
    }

    var myTemplate = $('#MyView-Template').html();
    var templateWithValues = _.template(myTemplate , values);
  }
});

and the template loaded using the view:

<script type="text/template" id="MyView-Template">  
  <li class="name"><%= name %></li>
  <li class="age"><%= age %></li>
  <li class="name"><%= height%></li>
  <li class="name"><%= description%></li>
</script>

everything works fine, although this is a contrived example, real code has many and more attributes in the model. The problem I am facing is how to handle model updates.

I am creating an HTML form that has a corresponding input element for each field. The form is modeled and loaded as a template:

<script type="text/template" id="MyEditView-Template">  
  <input type"text" value="<%= name %>" /> <br />
  <input type"text" value="<%= age%>" /> <br />
  <input type"text" value="<%= height%>" /> <br />
  <input type"text" value="<%= description%>" /> 
</script>

and loaded into the view:

MyEditView  = Backbone.View.extend({
      tagName: 'form',
      className: 'MyEditView',

      render() {
        var values = {
          name: this.model.get('name'),
          age: this.model.get('age'),
          height: this.model.get('height'),
          description: this.model.get('description')
        }

        var myTemplate = $('#MyEditView-Template').html();
        var templateWithValues = _.template(myTemplate , values);
      }
    });

, (MyModel). , . HTML-, .

, HTML, :

  • .
  • , .
  • .
  • , .

, JavaScript ( ), HTML-:

var AttributesMap = {
    name: {
        htmlRef: 'li.name',
        attributeName: 'name'
    },
    age: {
        htmlRef: 'li.age',
        attributeName: 'age'
    }
    ...
}

.

+3
3

. , , . , backbone.js.

1

render: function () {
    var model = this.model;
    $(this.el).empty().html(_.template(this.template, this.model.toJSON()))
    return this;
}

el - , . toJSON() - , , .

2

, initialize . - , change, .

window.ListView = Backbone.View.extend({
    initialize: function () {
        //pass model:your_model when creating instance
        this.model.on("change:name", this.updateName, this);
        this.model.on("change:age", this.changedAge, this);
    },
    render: function () {
        var model = this.model;
        $(this.el).empty().html(_.template(this.template, this.model.toJSON()))
        return this;
    },
    updateName: function () {
        alert("Models name has been changed");
    },
    changedAge: function () {
        alert("Models age has been changed");
    }
});

JsBin

http://jsbin.com/exuvum/2

+6

, , , . , <% = undefinedKey% > . , - , . :

this.$el.html(this.template({my_data: this.model.toJSON()}));

:

<% if(my_data.phone) { %><p><%= my_data.phone %> </p><% } %>

. .

, :

. , .

, "" , Backbone Model changedAttributes .

. , .

, , , , Backbone. :

    this.model.on("change:phone", this.render, this);
+1

, this.el. DOM- , , . /. , . (, [type = file]) .

, - DOM, , . . mine https://github.com/dsheiko/ng-template

:

<form id="heroForm" novalidate>
  <div class="form-group">
    <label for="name">Name</label>
    <input id="name" type="text" class="form-control" required >
    <div class="alert alert-danger" data-ng-if="!name.valid">
      Name is required
    </div>
  </div>
  <div class="form-group">
    <label for="power">Hero Power</label>
    <select id="power" class="form-control"  required>
      <option data-ng-for="let p of powers" data-ng-text="p" >Nothing here</option>
    </select>
    <div class="alert alert-danger" data-ng-if="!power.valid">
      Power is required
    </div>
  </div>
   <button type="submit" class="btn btn-default" data-ng-prop="'disabled', !form.valid">Submit</button>
</form>

Here we have tied the models name, powerand form. When their state changes (for example, during user input), the template reacts. It can hide / show error messages or disable / enable the submit button.

If this is interesting - how to link it to Backbone, here is a small free online book https://dsheiko.gitbooks.io/ng-backbone/

0
source

More articles:


All Articles