Ember.js 在emberjs中重新渲染视图

我在视图中有一个数组对象，它具有来自控制器的绑定。当我在控制器中更改阵列时，视图中的阵列会正确更改。但我的视图模板似乎已损坏：

当我尝试在视图中使用rerender方法时。我的模板没有坏。这把小提琴演奏得很好：

HTML:

---

我们什么时候应该手动使用重新渲染器方法？有没有办法在不重新渲染视图的情况下执行此操作？欢迎提出任何想法，提前感谢。

我尝试使用另一种策略重写您的示例

我没有计算索引，而是使用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>​

---

谢谢你的主意。但我的模板在不使用rerender方法时仍然损坏。你明白我的问题吗？好的，我不知道为什么你的特定模板不起作用。但是在与ember合作几个月后，我发现尝试另一种产生相同结果（通常更好）的方法比通常更快，然后陷入不起作用的解决方案。哦，我完全同意你的看法。你的想法很有用，你应该更新你的小提琴，因为它仍然使用旧的模板。不过，我可以对你的答案投赞成票。非常感谢！

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();

<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>​

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();​