Question

我在渲染模板时渲染尚未就绪的对象时出现问题。因此，它在没有数据绑定的情况下渲染空视图。

使用延迟对象或其他方法确保数据绑定的正确方法是什么？

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],
        }));
    })
},

Answer 1

这样做：

init: function(el, options) {
    /*Get data and initialize objects*/
    var self = this;
    self.selectedProject = Models.Project.findOne({
        id: 3
    }).done(function(project) {
        self.selectedProject = project;
    });
},

将延迟传递给can.view等待延迟解析然后使用其解析的值。随后，如果路径发生变化，项目将在selectedProject插槽中，准备使用。

canjs模板模型尚未准备好。数据绑定

1 个答案: