AppView = Backbone.View.extend({
    el: '#appele',
    template: _.template('<p>这是一个模板内容<br><span style="font-size: 30px;"><%=value%></span></p>'),
    initialize: function() {
        this.model = new Model();
        this.listenTo(this.model, 'add', this.render);
    },
    render: function() {
        this.$el.append(this.template({value: '哈哈'}));
        this.$('.dom').show();
    }
})

//react
import React from 'react';
//各个页面模块
import MyHeader from './MyHeader';
import MyAside from './MyAside';
import MySection from './MySection';
import MyFooter from './MyFooter';
//整体需要的样式
import './style/reset.less';
import './style/layout.less';

class Index extends React.Component {
    render() {
        return (
            <div>
                <MyHeader />
                <MyAside />
                <MySection />
                <MyFooter />
            </div>
        )
    }
}

export default Index;

//react
import React from 'react';
//MySection 模块中需要的样式
import './style/my_section.less';

class MySection extends React.Component {
    render() {
        return (
            <section>
                ...<!-- 此处省去500行 -->
            </section>
        )
    }
}

export default MySection;

angular.module('my_mvc', ['ngRoute', 'ngResource'])
  .config(function ($routeProvider) {
    'use strict';

    var routeConfig = {
        controller: 'IndexController',       //对应的 Controller
        templateUrl: 'js/views/index.html',  //对应的 html View 
        resolve: {                           //获取所需的 Model 操作对象 
            store: function (dataFactory) {
                //获取数据源
                return dataFactory.then(function (module) {
                    module.get(); // Fetch the todo records in the background.
                    return module;
                });
            }
        }
    };

    $routeProvider
        .when('/', routeConfig)
        .otherwise({
            redirectTo: '/'
        });
  });

/**
 * 控制器 IndexController
 */
angular.module('my_mvc')
    .controller('IndexController', function IndexController($scope, store) {
    'use strict';
    
    //从 service 里取数据操作对象
    var datalist = $scope.datalist = store.datalist;
    //====为了测试用
    window.datalist = datalist;
    window.$apply = $scope.$apply;
    
    //计算数组元素的个数，并进行及时的监控
    $scope.count = datalist.length;
    $scope.$watch('datalist', function () {
        $scope.count = datalist.length;
    }, true);
    
    /*
     * 给页面提供的方法
     */
    //年龄加一
    $scope._addAge = function (data, event) {
        data.age = data.age + 1;
        store.edit(data)
    }
    
    //加一条记录
    $scope._insertData = function () {
        var _data = {
            id: new Date().getTime(),
            name: '小王' + ($scope.count + 1),
            age: 19 + $scope.count
        };
        store.insert(_data);
    }
    
});

/**
 * 业务逻辑层 dataFactory
 * 这里用了 factory 的封装形式
 */
angular.module('my_mvc')
    .factory('dataFactory', function ($http, $injector) {
        'use strict';
        return $http.get('http//localhost/api')
                .then(function success() {
                    return $injector.get('http');
                }, function error() {
                    return $injector.get('localStorage');
                })
    
    })
    .factory('http', function ($resource) {
        'use strict';
        var store = {
            datalist: [],
            //用$resource构造 restful API 的 http 的远程接口
            api: $resource('http//localhost/api/data/:id', null, {update: {method: 'PUT'}}),
            //数据操作方法
            get: function () {
				return store.api.query(function (resp) {
					angular.copy(resp, store.datalist);
				});
			},
            edit: function (data) {
                return store.api.update({ id: data.id }, data)
					.$promise;
            },
            insert: function (data) {
                var realData = store.datalist.slice(0);

				return store.api.save(data,
					function success(resp) {
						data.id = resp.id;
						store.datalist.push(data);
					}, function error() {
						angular.copy(realData, store.datalist);
					})
					.$promise;
            }
        };
        return store;
    })
    .factory('localStorage', function ($q) {
        'use strict';
        var LOCALSTORAGE_ID = 'my_mvc';
        var store = {
            datalist: [],
            //通过的从 localstorage 存取数据的方法
            _getFromLocalStorage: function () {
                return JSON.parse(localStorage.getItem(LOCALSTORAGE_ID) || '[]');
            },
            _saveToLocalStorage: function (datalist) {
                return localStorage.setItem(LOCALSTORAGE_ID, JSON.stringify(datalist));
            },
            //数据操作方法
            get: function () {
                var deferred = $q.defer();
				angular.copy(store._getFromLocalStorage(), store.datalist);
				deferred.resolve(store.datalist);
				return deferred.promise;
            },
            edit: function (data) {
                var deferred = $q.defer(),
                    i;
                for (i = 0; i < store.datalist.length; i++) {
                    if(data.id === store.datalist[i].id) {
                        break;
                    }
                }
                store.datalist[i] = data;
                store._saveToLocalStorage(store.datalist);
                deferred.resolve(store.datalist)
                return deferred.promise;
            },
            insert: function (data) {
                var deferred = $q.defer();
                store.datalist.push(data);
                store._saveToLocalStorage(store.datalist);
                deferred.resolve(store.datalist);
                return deferred.promise;
            }
            
        };
        return store;
    })