骨干,我将使用同步或JQuery的?我能听要么? [英] Backbone, shall I use sync or JQuery? Can I listen for either?
问题描述
使用的前端骨干Rails应用程序。基本上我想用户输入的字符串,并打了一个提交按钮。一旦按钮被点击两种观点得到更新。我曾从这样用户一些很大的帮助,但遇到了另一个障碍。下面是详细信息:
Rails app using Backbone on the frontend. Basically I want the user to input a string and hit a submit button. Once that button is clicked two views get updated. I have had some great help from SO users but ran into another snag. Here are the details:
我有两个型号,发布和文章(相应Rails的型号)。我使用的宝石(Feedzirra)来解析用户输入RSS网址。于是我发网址/出版物,并使用返回的数据,我可以抢ID,所以我可以用它作为POST到/物品的输入。现在是时候重新呈现两种观点。起初,我尝试使用.SYNC功能进行POST请求,并有鉴于监听的变化并相应地更新骨干网。但是,因为我需要一个请求数据,以便我可以喂下,我必须使用$。员额()而不是.SYNC。这主要是因为我不知道很多关于如何使用.SYNC。这可能使用.SYNC办?
I have two models, Publication and Article (with corresponding Rails models). I am using a gem (Feedzirra) to parse the RSS URL the user enters. So I send the url to /publications and using the returned data I can grab the id so I can use it as an input for the POST to /articles. Now it is time to re-render both views. At first I tried using Backbones .sync function to make the POST requests and have the view listen for the changes and update accordingly. But, since I need the data from one request so I can feed it to the next, I have to use $.post() instead of .sync. This is mainly because I do not know much about how to use .sync. Is this possible to do using .sync?
下面是骨干的文章认为:
Here is the Article view in Backbone:
SimpleGoogleReader.Views.ArticlesIndex = Backbone.View.extend({
template: JST['articles/index'],
el: '#article',
events:{
'click #new_feed': 'createFeed'
},
initialize: function() {
this.listenTo(this.model, "sync", this.render);
},
render: function(){
this.$el.html( this.template({articles: this.model.toJSON()}) );
return this;
},
createFeed: function(e){
e.preventDefault();
var feed_url = $('#new_feed_name').val();
$.post('/publications', {url: feed_url}, function(data){
$.post('/articles/force_update', {url: feed_url, publication_id: data.id}, function(data){
var publications = new SimpleGoogleReader.Collections.Publications();
publications.fetch({
success: function(publications){
var view = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
view.render();
}
});
});
}, 'json');
}
});
下面是我回家功能中的骨干路由器:
Here is my home function in the Backbone router:
home: function(){
var publications = new SimpleGoogleReader.Collections.Publications();
var articles = new SimpleGoogleReader.Collections.Articles();
var pubIndex = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
var artIndex = new SimpleGoogleReader.Views.ArticlesIndex({model: articles});
articles.listenTo(publications, "change:shown", function(){
var articles = new SimpleGoogleReader.Collections.Articles();
articles.fetch({
success: function(articles){
var view = new SimpleGoogleReader.Views.ArticlesIndex({model: articles});
view.render();
}
});
});
publications.fetch();
articles.fetch();
},
我想,你可以在这里看到的另一件事,是要继续前进,鸟巢使用JQuery,而不是骨干同步的POST请求。一旦第二个回报我重新渲染出版物视图。然后,我只是有文章查看监听的出版物视图的变化,在这一点上进行自我更新。从我发现,我想你只能听为骨干的模型更改,而不是它的观点变化。是真的吗?
Another thing I am trying, that you can see here, is to go ahead and nest the POST requests using JQuery as opposed to Backbone's sync. Once the second one returns I re-render the publications view. Then I just have the articles view listen for the change in the publications view and update itself at that point. From what I've found I think you can only listen for Backbone's model changes and not it's view changes. Is that true?
请指教!
推荐答案
首先以下code添加到您的两个观点:
First add the following code to both of your views :
initialize: function() {
this.listenTo(this.model, "sync", this.render);
}
和路由器:
home: function(){
var publications = new SimpleGoogleReader.Collections.Publications();
var articles = new SimpleGoogleReader.Collections.Articles();
var pubIndex = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
var artIndex = new SimpleGoogleReader.Views.ArticlesIndex({model: articles});
articles.listenTo(publications, "sync", function(){
// no need to create the articles again
// var articles = new SimpleGoogleReader.Collections.Articles();
// just fetch the articles, the `this.listenTo(this.model, "sync", this.render);`
// will render the view for you
articles.fetch();
});
publications.fetch();
},
我认为你必须调用 articles.fetch()
这里:
$.post('/publications', {url: feed_url}, function(data){
$.post('/articles/force_update', {url: feed_url, publication_id: data.id}, function(data){
var publications = new SimpleGoogleReader.Collections.Publications();
publications.fetch({
success: function(publications){
var view = new SimpleGoogleReader.Views.PublicationsIndex({model: publications});
view.render();
// here !!!!
}
});
});
}, 'json');
这篇关于骨干,我将使用同步或JQuery的?我能听要么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!