0

テンプレートがレンダリングされる瞬間に準備ができていないオブジェクトのレンダリングに問題があります。したがって、データバインディングなしで空のビューをレンダリングしています。

データバインディングを保証するために遅延オブジェクトまたはその他の方法を使用する正しい方法は何ですか?

var Project = can.Model.extend({
    findOne: 'GET /v1/project?id={id}'
})
 var ProjectControl = can.Control.extend({
    selectedProject: '',
    init: function(el, options) {
        /*Get data and initialize objects*/
        var self = this;
        Models.Project.findOne({
            id: 3
        }, function(project) {
            self.selectedProject = project;
        });
    },
    'route': function() {
        /*root route*/
        $('#projectView').html(can.view('projectViewTemplate', this.selectedProject));
    }

})

var pc = new Controllers.ProjectControl('body');
can.route.ready();
window.location.hash = '#!'

selectedProject を空のモデルで初期化しようとしましたが、これは少しダンプ方法のようです:

 new Models.Project({name:'Empty project'}, phases:[]) //Dump way for doing the databinding

また、プロジェクトフェーズのようなプロジェクトのサブオブジェクトを使用する必要がある場合、これは問題を解決しません。

編集: プロジェクトのサブオブジェクトを待機するための非常に厄介な方法を見つけました。モデルの変更にハンドラーをバインドしたので、更新も機能するようになりました。これを行うためのよりエレガントな方法はありますか?

'edit/:id route': function(data) {
    var data = data;
    var self = this;
    this.selectedProject.bind('name', function(ev) {
        $('#projectView').html(can.view(self.defaults.phaseEditProject, {
            'phase': self.selectedProject.phases[data.id],
        }));
    })
},
4

1 に答える 1