从数组中渲染项目答案

【问题标题】：Rendering items from array从数组中渲染项目
【发布时间】：2013-11-01 00:33:53
【问题描述】：

我很困惑。我有以下模型，attr 标签和固定装置的转换：

Tracker.Story = DS.Model.extend({
    title: DS.attr('string'),
    tags: DS.attr('array', []),
});

DS.ArrayTransform = DS.Transform.extend({
 deserialize: function(serialized) {
  return serialized;
 },
 serialize: function(deserialized) {
   return deserialized.split(',');
 }
});

Tracker.register("transform:array", DS.ArrayTransform);

Tracker.Story.FIXTURES = [
{
    id: 1,
    title: "Some story",
    tags: ["tag1", "tag2", "tag3"],
}

和模板

{{#each itemController="story"}}
  {{title}}
  {{#each tag in tags}}
      {{tag}}
  {{/each}}
{{/each}}

它非常适合 FIXTURES 的故事。我通过界面添加了新故事，其中输入字段定义为：

{{input type="text" value=tags}}

转换正常工作并从字符串返回数组（例如，[1,2,3] from "1,2,3"）。

但是为添加的故事与下一条消息渲染标签失败：

断言失败：#each 循环的值必须是一个数组。你通过了 1 ember.js:417

Uncaught TypeError: Object 1 has no method 'addArrayObserver' ember.js:22976

未捕获的错误：您所做的某事导致视图在渲染后但在插入 DOM 之前重新渲染。

【问题讨论】：

标签： ember.js

【解决方案1】：

输入助手不支持将项目保存为数组。它正确显示在输入字段中的原因是因为在对象上调用了 toString 并且数组的 toString 是 1,2,3 等...当您更改输入字段时，它会炸掉底层数组并将其保存为一个字符串 1,2,3。

仅在加载/保存模型时执行转换，而不是在每次获取/设置底层模型时执行。

最好的办法是将输入字段与不同的属性相关联，并随着该字段的更改使用数组更新基础字段。

这样的事情会起作用：

http://emberjs.jsbin.com/EMapanu/3/edit

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  },
  setupController: function(controller, model){
    this._super(controller, model);
    controller.set('fakeModel', model);
  }
});

App.IndexController = Em.ArrayController.extend({

  modelUpdater: function(){
    var fm = this.get('fakeModel');
    if(!(fm instanceof Array)){
      fm = (this.get('fakeModel') || "").split(',');
    }
    this.set('model', fm);
  }.observes('fakeModel')
});

【讨论】：