add replace option & tests

Author: yyx990803

src/compiler.js

@@ -136,6 +136,23 @@ CompilerProto.setupElement = function (options) {
         ? document.querySelector(options.el)
         : options.el || document.createElement(options.tagName || 'div')
 
+    var template = options.template
+    if (template) {
+        // replace option: use the first node in
+        // the template directly
+        if (options.replace && template.childNodes.length === 1) {
+            var replacer = template.childNodes[0].cloneNode(true)
+            if (el.parentNode) {
+                el.parentNode.insertBefore(replacer, el)
+                el.parentNode.removeChild(el)
+            }
+            el = replacer
+        } else {
+            el.innerHTML = ''
+            el.appendChild(template.cloneNode(true))
+        }
+    }
+
     // apply element options
     if (options.id) el.id = options.id
     if (options.className) el.className = options.className
@@ -146,12 +163,6 @@ CompilerProto.setupElement = function (options) {
         }
     }
 
-    // initialize template
-    var template = options.template
-    if (template) {
-        el.innerHTML = ''
-        el.appendChild(template.cloneNode(true))
-    }
     return el
 }
 

test/unit/specs/api.js

@@ -350,6 +350,49 @@ describe('UNIT: API', function () {
 
             })
 
+            describe('replace', function () {
+                
+                it('should replace an in DOM node', function () {
+                    var testId = 'replace-test'
+                    mock(testId, '<div>ho</div>')
+                    var old = document.getElementById(testId),
+                        parent = old.parentNode
+                    var Test = Seed.extend({
+                        template: '<p>hi</p>',
+                        replace: true
+                    })
+                    var t = new Test({
+                        el: '#' + testId
+                    })
+                    assert.strictEqual(t.$el.tagName, 'P')
+                    assert.strictEqual(t.$el.textContent, 'hi')
+                    assert.strictEqual(t.$el.parentNode, parent)
+                    var now = document.getElementById(testId)
+                    assert.strictEqual(now, null)
+                })
+
+                it('should replace an off DOM Seed\'s $el', function () {
+                    var Test = Seed.extend({
+                        template: '<p>hi</p>',
+                        replace: true
+                    })
+                    var t = new Test()
+                    assert.strictEqual(t.$el.tagName, 'P')
+                    assert.strictEqual(t.$el.textContent, 'hi')
+                })
+
+                it('should not work if template has more than one child node', function () {
+                    var Test = Seed.extend({
+                        template: '<p>hi</p><p>ho</p>',
+                        replace: true
+                    })
+                    var t = new Test()
+                    assert.notStrictEqual(t.$el.tagName, 'P')
+                    assert.strictEqual(t.$el.innerHTML, '<p>hi</p><p>ho</p>')
+                })
+
+            })
+
             describe('element options', function () {
 
                 it('should not accept el as an extension option', function () {