NdYAG/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <ul class="items">
            <li class="item" data-status='{"liked": false}'>
                <div class="item-status">
                    Like
                </div>
                <div class="item-content">
                    Lorem Ipsum
                </div>
                <div class="item-actions">
                    <button class="js-like btn-normal">Like</button>
                </div>
            </li>
            <li class="item" data-status='{"liked": false}'>
                <div class="item-status">
                    Like
                </div>
                <div class="item-content">
                    Lorem Ipsum 2
                </div>
                <div class="item-actions">
                    <button class="js-like btn-normal">Like</button>
                </div>
            </li>
            <li class="item" data-status='{"liked": true}'>
                <div class="item-status">
                    Liked
                </div>
                <div class="item-content">
                    Lorem Ipsum 3
                </div>
                <div class="item-actions">
                    <button class="js-like btn-normal active">Liked</button>
                </div>
            </li>
        </ul>
    </body>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="http://libs.baidu.com/underscore/1.3.3/underscore-min.js"></script>
    <script src="backbone-min.js"></script>
    <script src="backbone.localStorage-min.js"></script>
    <script src="main.js"></script>
</html>

## multipage.js
$(function() {
  var Item = Backbone.Model.extend({
    defaults: {
      liked: false
    },
    toggleLike: function() {
      // this.save({
      //   liked: !this.get('liked')
      // })
      this.set('liked', !this.get('liked'))
    }
  })

  var ItemView = Backbone.View.extend({
    events: {
      "click .js-like": "toggleLike"
    },
    initialize: function() {
      this.listenTo(this.model, 'change:liked', this.renderLike)
    },
    toggleLike: function() {
      this.model.toggleLike()
    },
    renderLike: function() {
      if (this.model.get('liked')) {
        this.$el.find('.js-like').addClass('active').text('Liked')
        this.$el.find('.item-status').text('Liked')
      } else {
        this.$el.find('.js-like').removeClass('active').text('Like')
        this.$el.find('.item-status').text('Like')
      }
    }
  })

  var ItemList = Backbone.Collection.extend({
    model: Item
  })

  var ItemListView = Backbone.View.extend({
    initialize: function() {
      this.listenTo(this.collection, 'add', this.addOne)

      this.$('.item').each(_.bind(function(i, $item) {
        $item = $($item)
        this.collection.add({
          liked: $item.data('status').liked
        })
      }, this))

    },
    addOne: function(item) {
      var itemView = new ItemView({
        model: item
      })
        , index = this.collection.indexOf(item)
        , item = this.$('.item').eq(index)
      if (item.length) {
        itemView.setElement(item)
      } else {
        // add by rendering template
      }
    }
  })

  var itemListView = new ItemListView({
    el: $('.items'),
    collection: new ItemList()
  })

})

## style.css
html, body, ul, li {
  margin: 0;
  padding: 0;
}
.items {

}
.item {
  display: block;
  padding: 2em;
}
.btn-normal {
  border: 1px solid lightsalmon;
  background: white;
  color: salmon;
  padding: .5em 1em;
  font-size: 1.2em;
  cursor: pointer;
  outline: 0;
}
.btn-normal:hover {
  background: salmon;
  border-color: salmon;
  color: white;
}
.btn-normal.active {
  background: lightsalmon;
  color: white;
}
.btn-normal.active:hover {
  background: gray;
  border-color: gray;
  color: white;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	<ul class="items">
	<li class="item" data-status='{"liked": false}'>
	<div class="item-status">
	Like
	</div>
	<div class="item-content">
	Lorem Ipsum
	</div>
	<div class="item-actions">
	<button class="js-like btn-normal">Like</button>
	</div>
	</li>
	<li class="item" data-status='{"liked": false}'>
	<div class="item-status">
	Like
	</div>
	<div class="item-content">
	Lorem Ipsum 2
	</div>
	<div class="item-actions">
	<button class="js-like btn-normal">Like</button>
	</div>
	</li>
	<li class="item" data-status='{"liked": true}'>
	<div class="item-status">
	Liked
	</div>
	<div class="item-content">
	Lorem Ipsum 3
	</div>
	<div class="item-actions">
	<button class="js-like btn-normal active">Liked</button>
	</div>
	</li>
	</ul>
	</body>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script src="http://libs.baidu.com/underscore/1.3.3/underscore-min.js"></script>
	<script src="backbone-min.js"></script>
	<script src="backbone.localStorage-min.js"></script>
	<script src="main.js"></script>
	</html>
	$(function() {
	var Item = Backbone.Model.extend({
	defaults: {
	liked: false
	},
	toggleLike: function() {
	// this.save({
	// liked: !this.get('liked')
	// })
	this.set('liked', !this.get('liked'))
	}
	})

	var ItemView = Backbone.View.extend({
	events: {
	"click .js-like": "toggleLike"
	},
	initialize: function() {
	this.listenTo(this.model, 'change:liked', this.renderLike)
	},
	toggleLike: function() {
	this.model.toggleLike()
	},
	renderLike: function() {
	if (this.model.get('liked')) {
	this.$el.find('.js-like').addClass('active').text('Liked')
	this.$el.find('.item-status').text('Liked')
	} else {
	this.$el.find('.js-like').removeClass('active').text('Like')
	this.$el.find('.item-status').text('Like')
	}
	}
	})

	var ItemList = Backbone.Collection.extend({
	model: Item
	})

	var ItemListView = Backbone.View.extend({
	initialize: function() {
	this.listenTo(this.collection, 'add', this.addOne)

	this.$('.item').each(_.bind(function(i, $item) {
	$item = $($item)
	this.collection.add({
	liked: $item.data('status').liked
	})
	}, this))

	},
	addOne: function(item) {
	var itemView = new ItemView({
	model: item
	})
	, index = this.collection.indexOf(item)
	, item = this.$('.item').eq(index)
	if (item.length) {
	itemView.setElement(item)
	} else {
	// add by rendering template
	}
	}
	})

	var itemListView = new ItemListView({
	el: $('.items'),
	collection: new ItemList()
	})

	})
	html, body, ul, li {
	margin: 0;
	padding: 0;
	}
	.items {

	}
	.item {
	display: block;
	padding: 2em;
	}
	.btn-normal {
	border: 1px solid lightsalmon;
	background: white;
	color: salmon;
	padding: .5em 1em;
	font-size: 1.2em;
	cursor: pointer;
	outline: 0;
	}
	.btn-normal:hover {
	background: salmon;
	border-color: salmon;
	color: white;
	}
	.btn-normal.active {
	background: lightsalmon;
	color: white;
	}
	.btn-normal.active:hover {
	background: gray;
	border-color: gray;
	color: white;
	}