コントローラからバインドされた配列オブジェクトがビューにあります。コントローラの配列を変更すると、ビューの配列が正しく変更されます。しかし、壊れているように見えるビューのテンプレート:http: //jsfiddle.net/secretlm/2C4c4/84/
ビューで再レンダリングメソッドを使用しようとすると。私のテンプレートは壊れていません。このフィドルはうまく機能します: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();
いつ手動で再レンダリングメソッドを使用する必要がありますか?ビューを再レンダリングせずにそれを行う方法はありますか?よろしくお願いします。