Rerender view in emberjs - ember.js

Question

I have an array object in View with binding from Controller. When I change the array in controller, the array in view change properly. But my template for view that seems to be broken: http://jsfiddle.net/secretlm/2C4c4/84/
When I try to use rerender method in view. My template isn't broken. This fiddle works well: 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();
When should we use rerender method manually? Is there any way to do that without re-rendering my view? Any idea is welcomed, thanks in advance.

Answer 1

I have tried to rewrite your example by using another strategy http://jsfiddle.net/davidsevcik/FjB3E/
Instead of counting the indices I used the Array.slice function to create groups of four items. It also makes the code clearer.
<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();​