使用 angular 在 firebase 中保存结构化数据 [英] Saving structured data in firebase with angular
问题描述
我了解保存结构化数据的概念和最佳做法 在 firebase 中，但我不清楚如何将数据实际保存到多个位置并提供所需的交叉引用.
I understand the concepts and best practices of saving structured data in firebase, but I'm not clear on how to go about actually saving the data to multiple locations and providing the cross references needed.
{
articles: {
-KBX5TurV9uJTeiR26-N: {
title: 'post title 1',
body: 'post body goes here',
imagesRef: {
-KBX5XOYASP7h2ZPOKmg: true
}
},
-KCe7cy6QC29WRYap0D1: {
title: 'post title 2',
body: 'post body goes here',
imagesRef: {
-KBX5XOYASP7h2ZPOKmg: true
}
}
}
images: {
-KBX5XOYASP7h2ZPOKmg: {
image: 'data:image/gif;base64,R0lGODlhZABkAOYAAPj4...',
articlesRef: {
-KBX5TurV9uJTeiR26-N: true,
-KCe7cy6QC29WRYap0D1: true
}
}
}
}
上面的模式是我想要的一个例子.在提交由标题、正文和图像字段组成的表单时，我需要将标题和正文发布到文章对象，然后将图像发布到图像对象，然后使用交叉引用更新 imagesRef 和 articleRef 对象.在 Angular 中解决这个问题的最佳方法是什么?我也将 angularfire 作为项目的一部分.
The above schema is an example of what I am going for. On submit of a form consisting of a title, body and image field, I need to post the title and body to the articles object, then post image to the images object, then update the imagesRef and articlesRef objects with cross references. What is the best way to go about this in Angular. I also have angularfire as part of the project.
我是 angular 和 firebase 的新手，但我想我需要写两篇文章，一篇文章，一篇图片，以保存它们并生成唯一的 ID.然后我需要知道如何等待两者都成功，获取唯一的 id 并在两个对象上执行和更新以保存交叉引用.到目前为止，这是我所拥有的，但不知道如何进一步...
I'm new to angular and firebase but I think I would need to do two posts one to articles and one to images to save them and generate the unique ids. I would then need to some how wait for both to succeed, grab the unique ids and do and update on both objects to save the cross references. Here is what I have so far, but not sure how to take it further...
$scope.AddPost = function(){
var ref = new Firebase(FIREBASE_URI);
var newArticleRef = ref.child('articles').push();
var newArticleKey = newArticleRef.key();
// Create the data we want to update
var addNewPost = {};
addNewPost["articles/" + newArticleKey] = {
title: $scope.article.title,
post: $scope.article.post
};
if ($scope.image) {
var newImageRef = ref.child('images').push();
var newImageKey = newImageRef.key();
// Add image...
addNewPost['images/' + newImageKey] = {
image: $scope.image
};
//Add article ref...
addNewPost['images/' + newImageKey + '/articles/' + newArticleKey] = true;
//Add cross ref to article...
addNewPost['articles/' + newArticleKey + '/image/' + newImageKey] = true;
}
// Do a deep-path update
ref.update(addNewPost, function(error) {
if (error) {
console.log("Error:", error);
}
});
});
更新:我更新了代码示例以使用 多位置更新 和 扇出方法，但我在保存时出错...
UPDATE: I updated the code sample to make use of multi-location updates and the fan-out approach, but I'm getting an error on save...
Error: Firebase.update failed: First argument contains a path /images/-KCpx-Pj9oMM-EWN9irS that is ancestor of another path /images/-KCpx-Pj9oMM-EWN9irS/articles/-KCpx-Pj9oMM-EWN9irR
at Error (native)
at ig (http://localhost:8000/app/assets/js/plugins.js:430:390)
at jg (http://localhost:8000/app/assets/js/plugins.js:431:383)
at X.update (http://localhost:8000/app/assets/js/plugins.js:564:369)
at r.$scope.AddPost (http://localhost:8000/app/assets/js/app.js:171:17)
at fn (eval at <anonymous> (http://localhost:8000/app/assets/js/plugins.js:216:110), <anonymous>:4:212)
at e (http://localhost:8000/app/assets/js/plugins.js:257:177)
at r.$eval (http://localhost:8000/app/assets/js/plugins.js:133:446)
at r.$apply (http://localhost:8000/app/assets/js/plugins.js:134:175)
at r.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1427:22)
警告:我尝试了以下操作.它创建了一个对象并且没有触发 JS 错误，但是它清除了我的数据库，只留下了新创建的对象.没有损失太多，因为我现在只是在运行一些测试，但认为我应该警告其他人.不要这样做...
WARNING: I tried the following. It created a single object and did not trigger a JS error, but it wiped out my DB leaving only the newly created object. Didn't lose much as I'm just running some tests right now, but thought that I should warn others. Do Not Do this...
addNewPost.Articles = {};
addNewPost.Articles[newArticleKey] = {};
addNewPost.Articles[newArticleKey].title = $scope.article.title;
addNewPost.Articles[newArticleKey].post = $scope.article.post;
var newImageRef = ref.child('images').push();
var newImageKey = newImageRef.key();
addNewPost.images = {};
addNewPost.images[newImageKey] = {};
addNewPost.images[newImageKey].image = $scope.image;
addNewPost.images[newImageKey].articles = {};
addNewPost.images[newImageKey].articles[newArticleKey] = true;
addNewPost.Articles[newArticleKey].image = {};
addNewPost.Articles[newArticleKey].image[newImageKey] = true;
推荐答案
不确定这是最佳答案，但我发现以下内容对我有用.它利用 Frank van Puffelen 的建议使用多位置更新.以下代码设置为支持添加新图像，使用现有图像或根本不使用图像.我认为这同样适用于类别、标签或用户中的任何元数据.
Not sure its the best answer, but I found the following worked for me. It makes use of Frank van Puffelen's suggestion to use Multi-location updates. The following code was setup to support adding a new image, using an existing image or no image at all. I figure the same could apply to any meta data be in categories, tags, or users.
.controller('AddPostController', ['$scope','$firebaseArray','FIREBASE_URI',
function($scope,$firebaseArray,FIREBASE_URI) {
var ref = new Firebase(FIREBASE_URI);
$scope.AddPost = function(){
var newArticleRef = ref.child('articles').push();
var newArticleKey = newArticleRef.key();
var newImageRef = ref.child('images').push();
var newImageKey = newImageRef.key();
// Create the data we want to update
var addNewPost = {};
// Add new article...
addNewPost["articles/" + newArticleKey] = {
title: $scope.article.title,
post: $scope.article.post,
emailId: user,
'.priority': user
};
if ($scope.image) {
// Add new image reference to new article...
addNewPost["articles/" + newArticleKey].image = {};
addNewPost["articles/" + newArticleKey].image[newImageKey] = true;
// Add new image...
addNewPost['images/' + newImageKey] = {
image: $scope.image,
emailId: user,
'.priority': user
};
// Add article reference to new image...
addNewPost['images/' + newImageKey].articles = {};
addNewPost['images/' + newImageKey].articles[newArticleKey] = true;
} else if ($scope.article.image) {
// Add existing image reference to article...
addNewPost["articles/" + newArticleKey].image = {};
addNewPost["articles/" + newArticleKey].image[$scope.article.image] = true;
// Add new article reference to existing image...
addNewPost['images/' + $scope.article.image + '/articles/' + newArticleKey] = true;
}
// Do a deep-path update
ref.update(addNewPost, function(error) {
if (error) {
console.log("Error:", error);
}
});
};
}]);
这篇关于使用 angular 在 firebase 中保存结构化数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
