support for loop parameters in slot name #504

src/view/component.js

@@ -341,12 +341,41 @@ Component.prototype._initSourceSlots = function (isFirstTime) {
             if (slotBind) {
                 isFirstTime && this.sourceSlotNameProps.push(slotBind);
 
-                var slotName = evalExpr(slotBind.expr, this.scope, this.owner);
-                target = this.sourceSlots.named[slotName];
-                if (!target) {
-                    target = this.sourceSlots.named[slotName] = [];
+                // 处理slot+for的情况：https://github.com/baidu/san/issues/504
+                // 因为slot的name包含插值，且插值包含迭代变量，所以需要做特殊处理
+                var forDirective = child.directives
+                    && slotBind.expr
+                    && (slotBind.expr.type == ExprType.TEXT || slotBind.expr.type == ExprType.INTERP)
+                    && child.directives['for'] ; // eslint-disable-line dot-notation
+                var listData = null;
+                if(forDirective) {
+                    listData = evalExpr(forDirective.value, this.scope, this.owner);
+                }
+
+                // 插槽未被scoped
+                if (forDirective && listData) {
+                    for (var index in listData) {
+                        if (listData.hasOwnProperty(index) && listData[index] != null) {
+                            var itemScope = {};
+                            itemScope[forDirective.item] = listData[index];
+                            itemScope[forDirective.index || '$index'] = index;
+                            var itemData = new Data(itemScope, this.scope);
+                            var slotName = evalExpr(slotBind.expr, itemData, this.owner);
+                            target = this.sourceSlots.named[slotName] = [];
+                            // cache item data for render
+                            target.scope = itemData;
+                            target.push(child.forRinsed);
+                        }
+                    }
+                }
+                else {
+                    var slotName = evalExpr(slotBind.expr, this.scope, this.owner);
+                    target = this.sourceSlots.named[slotName];
+                    if (!target) {
+                        target = this.sourceSlots.named[slotName] = [];
+                    }
+                    target.push(child);
                 }
-                target.push(child);
             }
             else if (isFirstTime) {
                 target = this.sourceSlots.noname;

src/view/slot-node.js

@@ -95,7 +95,7 @@ function SlotNode(aNode, parent, scope, owner, reverseWalker) {
     // child owner & child scope
     if (this.isInserted) {
         this.childOwner = owner.owner;
-        this.childScope = owner.scope;
+        this.childScope = matchedSlots.scope || owner.scope;
     }
 
     if (initData) {

test/slot.spec.js

@@ -2994,4 +2994,63 @@ describe("Slot", function () {
             done();
         });
     });
+
+    it("slot prop contains for loop parameters", function (done) {
+        var Folder = san.defineComponent({
+            template: ''
+                +'<div>'
+                    + '<p s-for="i in files" class="file-{{i}}"><slot name="slot-{{i}}"/>(<slot name="slot-tip-{{i}}"/>)</p>'
+                +'</div>',
+            initData: function () {
+                return { files: ['error', 'rick'] }
+            }
+        });
+
+        var MyComponent = san.defineComponent({
+            components: {
+                'x-folder': Folder
+            },
+
+            initData: function () {
+                return {
+                    files: ['error', 'rick'],
+                    tips: {
+                        'error': 'bi',
+                        'rick': 'du'
+                    }
+                }
+            },
+
+            template: ''
+                + '<div>'
+                    + '<x-folder>'
+                        + '<b s-for="i, j in files" slot="slot-{{i}}">{{ j }}-{{ i }}</b>'
+                        + '<span s-for="i in files" slot="slot-tip-{{i}}">{{ tips[i] }}</span>'
+                    + '</x-folder>'
+                + '</div>'
+        });
+
+        var myComponent = new MyComponent();
+        var wrap = document.createElement('div');
+        document.body.appendChild(wrap);
+        myComponent.attach(wrap);
+
+        var p0 = wrap.getElementsByTagName('p')[0];
+        var bs0 = p0.getElementsByTagName('b');
+        expect(bs0.length).toBe(1);
+        expect(bs0[0].innerHTML).toBe('0-error');
+        var span0 = p0.getElementsByTagName('span');
+        expect(span0.length).toBe(1);
+        expect(span0[0].innerHTML).toBe('bi');
+
+        var p1 = p0.nextSibling;
+        bs1 = p1.getElementsByTagName('b');
+        expect(bs1.length).toBe(1);
+        expect(bs1[0].innerHTML).toBe('1-rick');
+        var span1 = p1.getElementsByTagName('span');
+        expect(span1.length).toBe(1);
+        expect(span1[0].innerHTML).toBe('du');
+
+        done();
+    });
 });