Javascript 我无法从json加载数据,我正在使用主干网
我正在尝试将内容加载到页面中,并且不向我收费,可能是视图有问题,因为如果我工作,模型获得的数据会丢失。 backbonejs不太了解,我希望使用JSON示例在网站上显示内容 你能帮帮我吗Javascript 我无法从json加载数据,我正在使用主干网,javascript,backbone.js,Javascript,Backbone.js,我正在尝试将内容加载到页面中,并且不向我收费,可能是视图有问题,因为如果我工作,模型获得的数据会丢失。 backbonejs不太了解,我希望使用JSON示例在网站上显示内容 你能帮帮我吗 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script>
$(function() {
var Article = Backbone.Model.extend();
var ArticleList = Backbone.Collection.extend({
model: Article,
url: 'https://support.mozilla.org/en/search?topics=hot&a=1&w=1&format=json&callback=?',
parse: function(response) {
return response.results;
}
});
var articleView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
var tmpl = _.template( $("#articleTemplate").html(), {} );
var html = template.tmpl(this.model.toJSON());
this.$el.html( html );
}
});
var articles = new ArticleList();
var articlesView = new articleView({model: articles});
articles.fetch();
articles.bind('reset', function() {
articlesView.render();
});
});
</script>
<title>Fortified Studio</title>
</head>
<body>
<div id="articles"></div>
<script id="articleTemplate" type="text/template">
<div class="results">
<div class="search_summary">
<%= search_summary %>
</div>
</div>
</script>
</body>
你的代码中有几个错误。请参见以下工作代码中的注释:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script>
$(function() {
var Article = Backbone.Model.extend();
var ArticleList = Backbone.Collection.extend({
model: Article,
url: 'https://support.mozilla.org/en/search?topics=hot&a=1&w=1&format=json&callback=?',
parse: function(response) {
return response.results;
}
});
var articleView = Backbone.View.extend({
initialize: function(){
// You haven't fetched your collection yet. So don't render.
//this.render();
},
render: function(){
// Underscore.js template assumes data is sent into _.template(...)
// You store a Collection of Models in this.model. Hence, wrap the Collection json into one json "results" attribute.
var html = _.template( $("#articleTemplate").html(), {results: this.model.toJSON()} );
//var html = template.tmpl(this.model.toJSON());
this.$el.html( html );
return this;
}
});
var articles = new ArticleList();
var articlesView = new articleView({model: articles});
// Bind to the reset event before fetching. Fetch will raise "reset" event.
// The render function should return this, and hence, you can use $el and append it to #articles.
articles.bind('reset', function() {
$("#articles").append(articlesView.render().$el);
});
// everything is wired up. Now fetch, will will start a chain reaction, i.e. render the view, and append to #articles
articles.fetch();
});
</script>
<title>Fortified Studio</title>
</head>
<body>
<div id="articles"></div>
<script id="articleTemplate" type="text/template">
<div class="results">
<div class="search_summary">
<ul>
<% _.each(results, function(res) { %> <li><%= res.search_summary %></li> <% }); %>
</ul>
</div>
</div>
</script>
</body>
</html>
如果你问一些有明确答案的具体问题,你会得到更好的结果。另外,试着提及你认为应该发生的事情,真正发生的事情等等。这将帮助人们理解你的问题。非常感谢!这个例子对我很有用:D