在emberjs中重新渲染视图

Question

我在View中有一个数组对象与Controller绑定。当我在控制器中更改数组时，视图中的数组会正确更改。但是我的视图模板似乎被打破了：http://jsfiddle.net/secretlm/2C4c4/84/

当我尝试在视图中使用rerender方法时。我的模板没有坏掉。这个小提琴效果很好：http://jsfiddle.net/secretlm/2C4c4/85/

HTML：

    <script type="text/x-handlebars" data-template-name="test">
        <button {{action "changeContent" target="App.latController"}}> Change</button>
    {{#each element in view.content}}
 <!-- if openTag is true, <ol> tag is created -->       
       {{#if element.openTag}}
          <ol>                                    
        {{/if}}
             <li>{{element.teo.item.Name}}</li>
 <!-- if closeTag is true, </ol> tag is created -->
        {{#if element.closeTag}}
          </ol>                   
        {{/if}}
    {{/each}}
   </script>​

使用Javascript：

App = Ember.Application.create({});

App.LatView = Ember.View.extend({
    templateName: "test",
    contentBinding: "App.latController.contentWithIndices",
    onRerender: function() {
        this.rerender();
        console.log(this.get('content'));
    }.observes('content')

});

App.latController = Ember.Object.create({
    changeContent: function() {
        this.set('model', []);
        var model = this.get('model');

        var obj1 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test1",
                "Name": "The name1"
            }
        };
        var obj2 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test2",
                "Name": "The name2"
            }
        }
        var obj3 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test3",
                "Name": "The name3"
            }
        }
        var obj4 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test4",
                "Name": "The name4"
            }
        }
        var obj5 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test5",
                "Name": "The name5"
            }
        }
        model.pushObject(obj1);
        model.pushObject(obj2);
        model.pushObject(obj3);
        model.pushObject(obj4);
        model.pushObject(obj5);

    },



    model: [
        {
           item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test1",
            "Name": "The name1"
          }
       }
        ,
    {
        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test2",
            "Name": "The name2"
        }
    }
        ,
    {
        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test3",
            "Name": "The name3"
        }
    },
    {

        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test4",
            "Name": "The name4"
        }
    },
    {

        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test5",
            "Name": "The name5"
        }
    } ],

            contentWithIndices: function() {
                var length = this.get('model').length;
                return this.get('model').map(function(i, idx) {
                    return {
                        teo: i,
                        openTag: (idx % 4 == 0),
                        closeTag: ((idx % 4 == 3) || (idx == length - 1))
                    };
                });
            }.property('model.@each')

        });

        var view = App.LatView.create({});
        view.append();

我们什么时候应该手动使用rerender方法？如果不重新渲染我的视图，有没有办法做到这一点？提前谢谢任何想法。

Answer 1

我尝试使用其他策略http://jsfiddle.net/davidsevcik/FjB3E/

重写您的示例

我使用Array.slice函数创建了四个项的组，而不是计算索引。它还使代码更清晰。

<script type="text/x-handlebars" data-template-name="test">
<button {{action "changeContent" target="App.latController"}}> Change</button>
{{#each elementGroup in view.content}}
    <ol>    
        {{#each element in elementGroup}}                
             <li>{{element.item.Name}}</li>
        {{/each}}
    </ol>                   
{{/each}}
</script>​

使用Javascript：

App = Ember.Application.create({});

App.LatView = Ember.View.extend({
    templateName: "test",
    contentBinding: "App.latController.contentSlicedBy4"
});

App.latController = Ember.Object.create({
    changeContent: function() {
        this.set('model', []);
        var model = this.get('model');

        var obj1 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test1",
                "Name": "The name1"
            }
        };
        var obj2 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test2",
                "Name": "The name2"
            }
        }
        var obj3 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test3",
                "Name": "The name3"
            }
        }
        var obj4 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test4",
                "Name": "The name4"
            }
        }
        var obj5 = {
            item: {
                "DisplayOrder": 1,
                "Public": true,
                "Description": "The test5",
                "Name": "The name5"
            }
        }
        model.pushObject(obj1);
        model.pushObject(obj2);
        model.pushObject(obj3);
        model.pushObject(obj4);
        model.pushObject(obj5);

    },



    model: [
        {
        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test1",
            "Name": "The name1"
        }}
        ,
    {
        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test2",
            "Name": "The name2"
        }}
        ,
    {
        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test3",
            "Name": "The name3"
        }},
    {

        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test4",
            "Name": "The name4"
        }},
    {

        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test5",
            "Name": "The name5"
        }},
    {

        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test6",
            "Name": "The name6"
        }},
    {

        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test7",
            "Name": "The name7"
        }},
    {

        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test8",
            "Name": "The name8"
        }},
    {

        item: {
            "DisplayOrder": 1,
            "Public": true,
            "Description": "The test9",
            "Name": "The name9"
        }}],

    contentSlicedBy4: function() {
        var result = [],
            begin = 0,
            model = this.get('model'),
            slice = model.slice(begin, begin + 4);

        while (!Em.empty(slice)) {
            result.push(slice);
            begin += 4;
            slice = model.slice(begin, begin + 4);
        }
        return result;
    }.property('model.@each', 'model')

});

var view = App.LatView.create({});
view.append();​