Ember.js视图计算属性不会传递给操作处理程序



我有一个具有窗体和按钮的余烬(1.0.0-pre2)视图。表单绑定到一个视图类,该类允许填充表单输入和收集输入的值。现在单击按钮,我想从表单值创建一个 dto 对象并将其发送到控制器。按钮 html 如下

<input type="submit" value="Add" data-icon="plus" {{action addReport view.report target="controller"}} />

视图代码为

ContentView: baseView.extend({
    task: null, //initialized when form is filled in
    report: function () {
        var task = this.get('task');
        if (task == null)
            return null;
        return reportModel.create({
            taskId: task.id
        });
    }.property()
})

控制器代码为

DayController: ember.Controller.extend({
    addReport: function (evt) {
        console.log(evt.context);
    }
})

当我运行代码时,事件上下文为 null。当我查看调试器时,report计算属性仅在呈现视图时执行一次。单击按钮时,不会计算计算属性 - 会立即调用控制器方法。

非常相似的结构在同一应用程序中工作正常,但对于不同的视图,该方法在路由器中,而不是控制器中:

<a href="#" {{action changeDate view.prevDate href=true}}>Prev</a>

视图:

HeaderView: baseView.extend({
    prevDate: function () {
        return addDays(this.get('_dataSource').date, -1);
    }.property()
})

按钮有什么问题,为什么它与链接相反不起作用?

不确定这是否是您的特定问题,但计算属性应指定依赖项。 例如

}.property('task')

余烬将缓存计算的属性。 依赖关系允许 Ember 知道缓存属性何时失效。

好的,经过一些调试,我发现了核心误解。

由帮助程序action句柄评估的操作的上下文,仅在呈现时执行。这就是另一个视图工作的原因 - 它不需要用户在当前视图中提供的数据,所有必要的信息在显示视图之前都已准备就绪。

因此,必须在呈现视图之前提供context字段,这与我的方案无关。我必须求助于控制器中的解决方法

DayController: ember.Controller.extend({
    addReport: function (evt) {
        console.log(evt.view.get('report'));
    }
})

太糟糕了,我希望我可以在不创建从控制器到视图的其他依赖项的情况下进行。

最新更新