2013-12-23 35 views
0

我正在尝试我的第一个基于ember的项目,并将emberfire集成到它以获取Firebase功能。我正在为另一个项目构建一个树形菜单构建器。EmberFire和嵌套数组

用于火力数据库的JSON是如下:

{ 
    "default" : { 
    "_type" : "arrayObject", 
    "name" : "unnamed", 
    "_name" : "default", 
    "menus" : { 
     "Top" : { 
     "menu" : { 
      "2" : { 
      "text" : "0-2", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 0, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : 0, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : 0 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : 208, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : 208 
      }, 
      "row" : 2, 
      "id" : 2 
      }, 
      "5" : { 
      "text" : "0-5", 
      "actions" : [ { 
       "action" : 3 
      } ], 
      "column" : 0, 
      "color" : { 
       "b" : 0, 
       "g" : 0, 
       "a" : 255, 
       "r" : 0 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : 208, 
       "g" : 208, 
       "a" : 255, 
       "r" : 208 
      }, 
      "row" : 5, 
      "id" : 5 
      }, 
      "12" : { 
      "text" : "1-3", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 1, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 3, 
      "id" : 12 
      }, 
      "15" : { 
      "text" : "1-6", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 1, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 6, 
      "id" : 15 
      }, 
      "8" : { 
      "text" : "0-8", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 0, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 8, 
      "id" : 8 
      }, 
      "_type" : "objectArray", 
      "7" : { 
      "text" : "0-7", 
      "actions" : [ { 
       "action" : 3 
      } ], 
      "column" : 0, 
      "color" : { 
       "b" : 0, 
       "g" : 0, 
       "a" : 255, 
       "r" : 0 
      }, 
      "_type" : "object", 
      "visibility" : "visible", 
      "page" : 0, 
      "bgColor" : { 
       "b" : 208, 
       "g" : 208, 
       "a" : 255, 
       "r" : 208 
      }, 
      "row" : 7, 
      "id" : 7 
      }, 
      "17" : { 
      "text" : "1-8", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 1, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 8, 
      "id" : 17 
      }, 
      "1" : { 
      "text" : "0-1", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 0, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : 0, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : 0 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : 208, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : 208 
      }, 
      "row" : 1, 
      "id" : 1 
      }, 
      "4" : { 
      "text" : "0-4", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3 
       } 
      }, 
      "column" : 0, 
      "color" : { 
       "b" : 0, 
       "g" : 0, 
       "a" : 255, 
       "r" : 0 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : 208, 
       "g" : 208, 
       "a" : 255, 
       "r" : 208 
      }, 
      "row" : 4, 
      "id" : 4 
      }, 
      "11" : { 
      "text" : "1-2", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 1, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 2, 
      "id" : 11 
      }, 
      "14" : { 
      "text" : "1-5", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 1, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 5, 
      "id" : 14 
      }, 
      "6" : { 
      "text" : "0-6", 
      "actions" : [ { 
       "action" : 3 
      } ], 
      "column" : 0, 
      "color" : { 
       "b" : 0, 
       "g" : 0, 
       "a" : 255, 
       "r" : 0 
      }, 
      "_type" : "object", 
      "visibility" : "visible", 
      "page" : 0, 
      "bgColor" : { 
       "b" : 208, 
       "g" : 208, 
       "a" : 255, 
       "r" : 208 
      }, 
      "row" : 6, 
      "id" : 6 
      }, 
      "0" : { 
      "text" : "0-0", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 0, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : 0 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : 208 
      }, 
      "row" : 0, 
      "id" : "0" 
      }, 
      "9" : { 
      "text" : "1-0", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 1, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 0, 
      "id" : 9 
      }, 
      "16" : { 
      "text" : "1-7", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 1, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 7, 
      "id" : 16 
      }, 
      "3" : { 
      "text" : "0-3", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 0, 
      "color" : { 
       "b" : 0, 
       "_type" : "objectArray", 
       "g" : 0, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : 0 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : 208, 
       "_type" : "objectArray", 
       "g" : 208, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : 208 
      }, 
      "row" : 3, 
      "id" : 3 
      }, 
      "10" : { 
      "text" : "1-1", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 1, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 1, 
      "id" : 10 
      }, 
      "13" : { 
      "text" : "1-4", 
      "actions" : { 
       "_type" : "objectArray", 
       "0" : { 
       "action" : 3, 
       "_type" : "object" 
       } 
      }, 
      "column" : 1, 
      "color" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "_type" : "object", 
      "visibility" : "hidden", 
      "page" : 0, 
      "bgColor" : { 
       "b" : { 
       "_type" : "object" 
       }, 
       "_type" : "objectArray", 
       "g" : { 
       "_type" : "object" 
       }, 
       "a" : { 
       "_type" : "object" 
       }, 
       "r" : { 
       "_type" : "object" 
       } 
      }, 
      "row" : 4, 
      "id" : 13 
      } 
     }, 
     "_type" : "object" 
     }, 
     "_type" : "objectArray" 
    }, 
    "id" : "default" 
    }, 
    "_type" : "objectArray", 
    "app2" : { 
    "_type" : "arrayObject", 
    "name" : "app2", 
    "_name" : "app2", 
    "menus" : { 
     "Top" : [ { 
     "text" : "0-0" 
     } ], 
     "_type" : "objectArray" 
    } 
    } 
} 

无论如何,我已经使用余烬,提供了一个余烬对象我的初始阵列的一个叉成功(https://github.com/ember-meteor/emberFire/blob/refactor/emberfire-latest.js

这样可行。

我有一个嵌入式阵列,我变成另一个余烬ObjectArray和

我的代码:https://github.com/jondthompson/menutest

我使用了与原始ObjectArray创建类似的行为,为嵌套在'ssApp'中的'ssMenus'数组创建第二个,但它似乎没有填充来自Firebase的正确数据,也不是路由器甚至用空阵列发射。

正确的行为是当你点击一个'应用程序',应用程序的名称出现在底部(工作!),菜单的名称出现在它旁边(不)。

无论如何,请帮助!

回答

1

我想通了。

  • 我正在手动编写儿童firebase参考。我想通过原始的firebase对象来做到这一点。
  • 我没有将子引用封装在firebase对象中,而是我试图将它注入某个不属于它的地方。
  • 我试图创建第二条路线,当时我不需要它。

我可能错过了别的东西。我认为自己是一名初学者程序员,所以这扩展了我的能力。

我原来的AppController ..

App.SsAppController = Ember.ObjectController.extend({ 
    needs: ["selected_ssApp", 'ssMenus'], 

    selected: function(){ 
    return this.get('controllers.selected_ssApp.model') === this.get('model'); 
    }.property('controllers.selected_ssApp.model', 'model'), 

    actions: { 
    select: function(){ 
     var model = this.get('model'); 
     var menuList = this.get('controllers.ssMenus') 
     Ember.debug("MenuList: "+ menuList); 
     this.set('controllers.selected_ssApp.model', model); 
     menuList.set('ref', new Firebase("https://menutest.firebaseio.com/jt-test/"+model.content._name+"/menus")); 

    } 
    } 
}); 

我的新的和改进的(阅读:工作)MenuController ..

App.SsAppController = Ember.ObjectController.extend({ 
    needs: ["selected_ssApp", 'ssMenus'], 
    menus: function(){ 
     var model = this.get('model'), 
     ref = model.get('ref'); 

     return EmberFire.ObjectArray.create({ ref: ref.child('menus')}); 
    }, 
    selected: function(){ 
    return this.get('controllers.selected_ssApp.model') === this.get('model'); 
    }.property('controllers.selected_ssApp.model', 'model'), 
    actions: { 
    select: function(){ 
     var model = this.get('model'), 
     menusObj = model.get('menus'); 
     this.set('controllers.selected_ssApp.model', model); 

     this.set('controllers.ssMenus.content', this.menus()); 
    } 
    } 
});