Question

我正在测试我的应用程序，所以我正在执行以下操作：

我展示#/locators/index个对象的索引视图（Locator），我最初加载App.Locator.find();
我手动修改后端
手动（使用按钮/操作）我触发刷新前端前端中的数据，而不更改路径。我用App.Locator.find().then(function(recordArray) {recordArray.update();});执行此操作。我通过控制台日志记录看到列表请求被发送到后端，并且收到了最新数据。我认为这用于更新商店。
但是：视图不会自动更新以显示此新数据

为什么商店收到新数据时视图不会自动更新？这不是Ember中数据绑定的重点吗？

如果我现在执行以下操作：

打开任何其他路线
返回定位器索引路径（#/locators/index）
Ember发送新请求以列出定位器
显示索引视图，其中包含正确的数据（因为它已存在于商店中？）
收到新数据

（我不是100％确定4和5按顺序发生，但我很确定）

所以，我的印象是数据在商店中得到了适当的更新，但是以某种方式需要完全重新呈现视图来显示这些新数据，例如通过离开并重新进入路线。这是真的？我可以通过编程方式强制重新渲染吗？

Answer 1

当控制器更改基础模型时，Ember会更改视图数据（绑定到视图）

（仅当应用程序状态发生变化（url更改）时才调用路由器挂钩）通过捕获视图触发的操作，当您在路线中this.refesh()时，可以解决您的问题。

App.IndexRoute = Ember.Route.extend({
    actions: {
        dataChanged: function() {
            this.refresh();
        }
       },
       //rest of your code goes here

        });

为此工作你的车把模板修改数据shoud有一个叫做dataChanged

的动作

示例：

假设此操作负责更改/修改/删除基础数据

<button {{action 'dataChanged'}}> Change Data </button>

刷新方法实际上会进行模型刷新并将其传递给相应的控制器，该控制器确实会更改视图。

Answer 2

有些事情可以让你想到：

如果您在ArrayController强制内部，则要使用新数据替换内容：

this.replaceContent(0, recordArray.get('length'), recordArray);

或尝试通过循环recordArray在每条记录上调用reload：

App.Locator.find().then(function(recordArray) {
  recordArray.forEach(function(index, record) {
    record.reload();
  }
}

如果第二种方法有效，你也可以覆盖模型类中的didLoad钩子，而不必逐个遍历它们：

App.Locator = DS.Model.extend({
  ...
  didLoad: function(){
    this.reload();
  }
});

如果这样做并且您需要在更多模型类中使用此行为，请考虑创建一个通用mixin以在更多模型类中使用：

App.AutoReloadMixin = Ember.Mixin.create({
  didLoad: function() {
    this._super();
    this.reload();
  }
});

App.Locator = DS.Model.extend(App.AutoReloadMixin, {
  ...
});

App.Phone = DS.Model.extend(App.AutoReloadMixin, {
  ...
});

根据您的回答进行更新

Handlebars.registerHelper没有绑定意识，我确信这会导致你的绑定不被激发。您应该使用Handlebars.registerBoundHelper或仅使用等同的Handlebars.helper：

Handlebars.helper('grayOutIfUndef', function(property, txt_if_not_def) {
  ...
});

希望这有帮助。

Answer 3

不知何故，这似乎是因为我正在使用自定义车把助手，如下所示：

Handlebars.registerHelper('grayOutIfUndef', function(property, txt_if_not_def) {
    // HANDLEBARS passes a context object in txt_if_not_def if we do not give a default value
    if (typeof txt_if_not_def !== 'string') { txt_if_not_def = DEFAULT_UNDEFINED_STR; }
    // If property is not defined, we return the grayed out txt_if_not_def
    var value = Ember.Handlebars.get(this, property);
    if (!value) { value = App.grayOut(txt_if_not_def); }
    return new Handlebars.SafeString(value);
});

我一直在使用这个：

{{grayOutIfUndef      formattedStartnode}

现在我已移至视图：

{{view App.NodeIconView nodeIdBinding="outputs.startnode"}}

这是这样实现的：

App.NodeIconView = Ember.View.extend({
    render: function(buffer) {
        var nodeId = this.get('nodeId'), node, html;
        if (nodeId) {
            node = App.getNode(nodeId);
        }
        if (node) {
            html = App.formattedLabel.call(node, true);
        } else {
            html = App.grayOut(UNDEFINED_NODE_NAME);
        }
        return buffer.push(html);
    }
});

我不知道为什么，但似乎使用自定义手柄助手打破了属性绑定机制（也许我的实现是错误的）

从后端接收更新数据后，索引视图未刷新

3 个答案:

根据您的回答进行更新