gpt4 book ai didi

javascript - render 没有被一个 api 调用,而是被另一个 api 调用

转载 作者:行者123 更新时间:2023-12-02 14:01:55 27 4
gpt4 key购买 nike

我使用下划线模板配置了一个简单的主干模型和 View 。两个单独的 API 使用完全相同的配置。

API 1 按预期工作。

要重现该问题,请注释掉 API 1 的 URL,并取消注释 API 2 的 URL。

正如您所看到的,我已经标准化了两个 api 的响应数据,这两个 api 返回了完全相同的数据结构。但是,不会调用 API 2 的渲染方法。更奇怪的是,在极少数情况下,API 2 确实会调用 render。

我在这里缺少什么?

// Model
var Quote = Backbone.Model.extend({
// API 1
//urlRoot: 'http://quotes.stormconsultancy.co.uk/quotes/1.json',

// API 2
urlRoot: 'http://quotes.rest/qod.json',

parse: function (data){
try{
data = data['contents'].quotes[0];
}
catch(e){
}

var rd = {author:data.author, quote:data.quote}
console.log("parsed", typeof rd, rd);
return rd;
},

// UPDATE as suggested by cory
initialize: function() {
this.on('all', function(eventName) {
console.log('QuoteModel: ' + eventName);
});
}
});

// View
var QuoteView = Backbone.View.extend({
initialize: function() {
this.template = _.template($('#quote-template').html());
this.listenTo(this.model, 'change', this.render);
},

render: function(){
console.log("render", this.model.attributes)
this.$el.html(this.template(this.model.attributes));
}
});

var quoteM = new Quote();
quoteM.fetch();

$(document).ready(function() {
var quoteV = new QuoteView({
el: $('#quote'),
model: quoteM
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>

<script type="text/html" id="quote-template">
<p>The author is : <%= author %></p>
<p>The content is : <%= quote %></p>
</script>

<div id="quote"></div>

最佳答案

您有一个竞争条件,您可以在创建 View 之前获取该条件。

因此,如果在文档准备好之前获取完成,则在 View 开始监听模型之前会触发更改事件。

最简单的解决方案

$(document).ready(function() {
var quoteM = new Quote();
var quoteV = new QuoteView({
el: $('#quote'),
model: quoteM
});
// fetch after
quoteM.fetch();
});

最佳解决方案

var API_DOMAIN = "http://quotes.rest/";
// Reusable model
var Quote = Backbone.Model.extend({});

// reusable quotes collection
var QuoteCollection = Backbone.Collection.extend({
model: Quote,
// simple generic parse
parse: function(response) {
return response.contents.quotes;
},
});

// View
var QuoteView = Backbone.View.extend({
// GOOD: gets called once
template: _.template($('#quote-template').html()),

initialize: function() {
// BAD: gets called for every view
// this.template = _.template($('#quote-template').html());

this.listenTo(this.model, 'change', this.render);
},

render: function() {
console.log("render", this.model.attributes)
this.$el.html(this.template(this.model.toJSON()));
// Backbone standard for chaining
return this;
}
});


$(function() {
var quoteV,
collection = new QuoteCollection();
collection.fetch({
url: API_DOMAIN + 'qod.json',
success: function(collection, response, options) {
// only create the view when you need it
quoteV = new QuoteView({
el: $('#quote'),
model: collection.first()
});

// manually render to be 100% in control. The event now only
// serves if the model really changes.
quoteV.render();
}
});

});
<div id="quote"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>

<script type="text/html" id="quote-template">
<p>The author is :
<%= author %>
</p>
<p>The content is :
<%= quote %>
</p>
</script>

关于javascript - render 没有被一个 api 调用,而是被另一个 api 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40349346/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com