Question

我试图通过Backbone获得一个简单的SPA用于测试目的。当我渲染视图时，我的Underscore模板不会继承模型中的任何属性。我会假设我犯了一个简单的错误，但在摆弄它超过一个小时后，我在这里寻求一些指导。如果它有帮助，我使用ASP.NET Web API 2，jQuery 2.x +，以及最新版本的Backbone和Underscore。

我的模板：

<script type="text/template" id="equipmentTemplate">
    <td><%= ID %></td>
    <td><%= Name %></td>
    <td><%= Quantity %></td>
    <td><%= Description %></td>
</script>

我的代码：

// Single item model
var EquipmentModel = Backbone.Model.extend({
    urlRoot: '/api/equipment',
    defaults: {
        ID: '',
        Name: '',
        Quantity: '',
        Description: ''
    },
});

// Collection of our single item models
var EquipmentList = Backbone.Collection.extend({
    model: EquipmentModel,
    url: '/api/equipment'
});

// GET single instance of model
var equipmentModel = new EquipmentModel({ id: 1 });
equipmentModel.fetch();

// GET entire collection
var equipmentList = new EquipmentList();
equipmentList.fetch();

// Create single model view
EquipmentView = Backbone.View.extend({
    tagName: "tr",
    template: _.template($("#equipmentTemplate").html()),
    render: function () {
        this.$el.html(this.template(this.model.attributes));
    }
});
var equipmentView = new EquipmentView({ model: equipmentModel });
equipmentView.render();

调用运行console.log(equipment.fetch())时，将从服务器返回以下内容：

Object {readyState: 1, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
complete: function () {
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 4
responseJSON: Object
responseText: "{"ID":1,"Name":"A random part","Quantity":2,"Description":"foo bar approved."}"
setRequestHeader: function ( name, value ) {
state: function () {
status: 200
statusCode: function ( map ) {
statusText: "OK"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object

然而，当我返回视图时，我看到：

equipmentView.$el.html()
"
    <td></td>
    <td></td>
    <td></td>
    <td></td>
"

另外，请注意，我尝试在视图中包含实际模型，并且项目不呈现。我也尝试过使用this.model.toJSON()。我尝试过的一个例子是：

EquipmentView = Backbone.View.extend({
    tagName: "tr",
    template: _.template($("#equipmentTemplate").html()),
    render: function () {
        this.$el.html('<td>'+ this.model.get('Name') + '</td>');
    }
});

然而，这只会产生一个空的<td></td> ......这看起来并不合适。

更新：得到它，多亏了gerl。

我需要在视图中获取模型：

// Create single model view
EquipmentView = Backbone.View.extend({
    initialize: function () {
        this.model.fetch();
    },
    tagName: "tr",
    template: _.template($("#equipmentTemplate").html()),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
    }
});
var equipmentView = new EquipmentView({ model: equipmentModel });
equipmentView.render();

这很有效。

Answer 1

在模型或集合中添加fetch调用（无论从json调用哪个）。

类似的东西：

var EquipmentList = Backbone.Collection.extend({
    model: EquipmentModel,
    url: '/api/equipment',
    initialize: function() { 
      this.fetch(); 
    }
});

Backbone.js模板不从模型继承属性

1 个答案: