AngularJS中更复杂的工作流程的3向绑定示例

时间:2014-04-15 00:57:37

标签: angularjs firebase

我正在研究Firebase作为我想要构建的实时工具的解决方案。让我们说一个UI,它从Firebase获取产品列表,让客户点击列表中的项目以在编辑器中加载它们。还可以说UI显示了相同信息的iframe,可能以不同的方式呈现。当客户在编辑器中更改数据时,我希望将iframe内容绑定到同一资源并进行更新。

我已经完成了您网站上的简单示例,并且当只有一个带有名称值对的简单对象时,证明选择概念正常工作。但是我不知道如何继续使用$绑定更复杂的对象,以便可以将它们加载到表单中,编辑并同步回Firebase。

例如,如果这是我的数据:

"products": [
       {
           "name": "Shiney Red Sparkles",
           "path": "/product",
           "images": [
               "http://lorempixel.com/100/100/",
               "http://lorempixel.com/100/100/",
               "http://lorempixel.com/100/100/"
           ],
           "price": "129.99",
           "currency": "dollar",
           "options": [],
           "description": "These things are shiney. And red!",
           "vlnId": "0"
       },
       {
           "name": "Summer Dress",
           "path": "/product",
           "images": [
               "http://lorempixel.com/100/100/",
               "http://lorempixel.com/100/100/",
               "http://lorempixel.com/100/100/"
           ],
           "price": "129.99",
           "currency": "dollar",
           "options": [],
           "description": "Summer dresses are nice on hot days",
           "vlnId": "2"
       },
       {
           "name": "Summer Shoes",
           "path": "/product",
           "images": [
               "http://lorempixel.com/100/100/",
               "http://lorempixel.com/100/100/",
               "http://lorempixel.com/100/100/"
           ],
           "price": "129.99",
           "currency": "dollar",
           "options": [],
           "description": "Summer shoes are comfortable at the beach",
           "vlnId": "3"
       },

我的概念验证用户界面使用转发器生成一个带有ng-click的列表,该列表依次传递/加载指令并点击该对象。这是我遇到空白墙的地方。传递给指令的对象不再是$ firebase对象。好的,我可以抓住$ firebase孩子:

$scope.currentProduct = $scope.products.$child(product.id);

这种工作,通过将其传递给指令并在指令中使用ng-change。但是,我遇到了将子元素从指令中解除绑定的问题...

有用的是使用$ firebase执行更多高级操作的指南,因为我已将其包装在服务中,因此我可以注入一个能够为我管理firebase连接的服务对象。

我是这样的一个案例,我希望获得一个项目列表并实时编辑项目列表,使用一个列表更好(http://****.fb.io/products /)并绑定/取消绑定子指令或从firebase获取列表,并在我想编辑它时从firebase重新获取项目数据,因为在编辑完成后可能更容易取消绑定?

很难从与当前$ firebase服务相关的3way绑定相关的SO帖子中分辨出来,所有示例都是非常简单的聊天服务,不会使用更复杂的对象或者不# 39;需要在应用程序中包含3way绑定。任何关于在哪里找到关于此类问题的更多信息的想法都将不胜感激。

1 个答案:

答案 0 :(得分:1)

与同事一起研究我在Firebase后端看到的奇怪行为是由于firebase对象传递给用于编辑它们的指令的方式。 3way绑定工作正常。

我没有发布太多代码的原因是我对一些或多个双向应用程序原型设计的早期阶段的一些最佳实践和经验教训感兴趣。我的用例是这些应用程序可能看起来和感觉不同,但它们使用相同的数据,3way绑定在我的UI中打开了一些非常酷的可能性。在研究我提到的一般指导原则以及导致我走向SO的问题时,我在Firebase.io或一般的互联网上找不到太多东西,所以我想知道SO社区是否有任何东西。