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.
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.
Javascript: