1

コントローラからバインドされた配列オブジェクトがビューにあります。コントローラの配列を変更すると、ビューの配列が正しく変更されます。しかし、壊れているように見えるビューのテンプレート: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();

いつ手動で再レンダリングメソッドを使用する必要がありますか?ビューを再レンダリングせずにそれを行う方法はありますか?よろしくお願いします。

4

1 に答える 1

2

別の戦略を使用して例を書き直そうとしましたhttp://jsfiddle.net/davidsevcik/FjB3E/

インデックスをカウントする代わりに、Array.slice関数を使用して4つのアイテムのグループを作成しました。また、コードがより明確になります。

<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();​
于 2012-09-04T08:10:18.240 に答える