vuejs
/
vue
mirrorاز https://github.com/vuejs/vue.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html>
	<head>
		<title>ideal</title>
		<meta charset="utf-8">
	</head>
	<body>
		<div id="test">
			<p>{{msg}}</p>
			<p>{{msg}}</p>
			<p>{{msg}}</p>
			<p>{{what}}</p>
			<p>{{hey}}</p>
		</div>
		<script>
			var bindingMark = 'data-element-binding'
			function Element (id, initData) {

				var self	 = this,
					el 		 = self.el = document.getElementById(id)
					bindings = {} // the internal copy
					data 	 = self.data = {} // the external interface
					content  = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken)

				el.innerHTML = content

				for (var variable in bindings) {
					bind(variable)
				}

				if (initData) {
					for (var variable in initData) {
						data[variable] = initData[variable]
					}
				}

				function markToken (match, variable) {
					bindings[variable] = {}
					return '<span ' + bindingMark + '="' + variable +'"></span>'
				}

				function bind (variable) {
					bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]')
				    ;[].forEach.call(bindings[variable].els, function (e) {
				        e.removeAttribute(bindingMark)
				    })
					Object.defineProperty(data, variable, {
						set: function (newVal) {
						    [].forEach.call(bindings[variable].els, function (e) {
						        bindings[variable].value = e.textContent = newVal
						    })
						},
						get: function () {
						    return bindings[variable].value
						}
					})
				}
			}
			
			var app = new Element('test', {
				msg: 'hello'
			})

		</script>
	</body>
</html>