0

这是我 index.html 中的一小段代码：

<a href="#driver.html"><button type="button"
class="btn btn-default btn-large active style="border-right-color: white">Drivers</button></a>

我的 router.js 我已经包含了视图

 routes: {
   '': 'defaultAction',
   'drivers':'driver'

}

driver:function(){
console.log("Drivers");
var addview = new AddDriverView({el: $("#content")});

//我想在我的内容中加载视图所以#content addview.render();

);}

控制台中的输出是 Drivers。现在我希望驱动程序功能加载视图。如何 ？

更新我给出的观点

        var AddDriverView = Backbone.View.extend({
                el: '#addDriver',  // addDriver is the id of the form of the view i have created as view.adddriver.htm(it comtains only the form and nothing else.)

                events: {
                    'submit': 'submit'
                },
                ***render: function() {
                    $(this.el).html();    
                },***

                submit: function(e) {
// some code
}
});

渲染功能正确吗？我正在尝试的只是呈现表单...

@kunerd

4

1 回答 1

1

网上有很多关于如何实例化 Backbone 视图的资源。

请阅读：什么是视图？

然后看对应的jsFiddle

编辑：到目前为止，我可以看到，您的问题是您没有在render()任何地方调用您的视图方法。你可以在你的路由器初始化之后调用它，或者你可以在viewsinitialize方法中调用它。

在控制器中：

AppRouter = Backbone.Route.extend({
  ...
  driver:function(){
    console.log("Drivers");
    var addview = new AddDriverView({el: $("#content")});
    addView.render();
  }
  ...
});

或考虑到：

AddDriverView = Backbone.View.extend({
  initialize: function () {
    this.render();
  }
});

编辑：路由器驱动程序功能的解释：new AddDriverView({el: $("#content")});创建 AddDriverView 类的新实例。该el属性将此视图绑定到具有 id 的现有 DOM 元素content。如果您不指定一个 Backbone 将始终创建一个 DIV 元素。该方法调用addView.render()告诉您新创建的视图将其内容呈现到 DOM 中，然后呈现到具有 id 的元素中content。有关详细信息，请查看Backbone 的文档。

您还需要将您的#addDriver内容用作视图中的模板。

render: function(){
  var template = _.template( $("#search_template").html(),{});
  this.$el.html( template );
}

这个jsFiddle应该可以帮助你。这里有一些关于下划线模板的更多信息，因为它在上面使用过。

但是有很多方法可以创建视图以及如何使用路由器。有关更多信息，请查看此问题和答案。

于 2013-09-18T08:38:39.743 回答