gpt4 book ai didi

模型获取之前的主干.js View 呈现

转载 作者:行者123 更新时间:2023-12-04 13:06:10 30 4
gpt4 key购买 nike

我正在尝试制作一个小型的backbone.js 应用程序,但在事情的顺序上很挣扎。

在我的 html 文件中,标题中有两个脚本 block :

<script type="text/template" id="model-template">
<a href="#"><%= title %></a>
</script>

<script type="text/javascript">
jQuery(function(){
window.model.fetch();
});
</script>

在我的 app.js 中,我定义了一个简单的模型、 View 和一个路由器。
(function($) {

window.MyModel = Backbone.Model.extend({
url: '/mymodel'
});

window.mymodel = new MyModel();

$(document).ready(function() {

window.MyModelView = Backbone.View.extend({
template: _.template($('#mymodel-template').html()),

initialize: function () {
_.bindAll(this, 'render');
},

render: function () {
var renderedContent = this.template(this.model.toJSON());
$(this.el).html(renderedContent);
return this;
}
});
});

window.MyApp = Backbone.Router.extend({
routes: {
'': 'home'
},

initialize: function () {
this.myModelView = new MyModelView({
model: window.mymodel
});
},

home: function() {
var $body = $('body');
$body.empty();
$body.append(this.myModelView.render().el);
}
});

$(function() {
window.App = new MyApp();
Backbone.history.start({pushState: true});
});

})(jQuery);

该应用程序由一个简单的 sinatra 应用程序提供服务。网址 /mymodel提供静态 json 文件:
{
"title": "My Model",
}

加载应用程序时,我在 javascript 控制台中收到错误消息:
Uncaught ReferenceError: title is not defined

问题似乎是, View 在从服务器获取模型之前呈现自身。这是为什么?

昨天,我关注了 PeepCode 的前两个主干.js 截屏视频。我试图将我的应用程序与截屏视频中的应用程序进行比较,但看不到我的应用程序想要工作的原因。

有什么建议么?

最佳答案

在这种情况下,您应该引导您的模型数据,以便在页面加载时可用。

代替

window.model.fetch();

把这样的东西放进去(如果使用.erb)
<script>
window.model = new MyModel(<%= @model.to_json %>);
</script>

否则,您需要在获取模型后渲染 View ,例如

绑定(bind) View 以在模型更改时渲染
initialize: function () {
_.bindAll(this, 'render');

this.model.on("change", this.render);
},

或处理model.fetch成功并渲染 View
window.model.fetch({
success: function (model, response) {
window.MyApp.myModelView.render();
}
});

关于模型获取之前的主干.js View 呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9220092/

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