отображать полученный результат модели backbonejs

Я пытаюсь показать результат выборки одной модели в html-форме

Вот моя часть backbone.js:

window.Category = Backbone.Model.extend({
    urlRoot : "../myWs/category/"
});

window.CategoryView = Backbone.View.extend({
    el : $('#category_details'),
    template : _.template($('#category-details').html()),
    initialize : function() {
        this.render();
    },
    render : function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

var category = new Category({
    id : "067e6162-3b6f-4ae2-a171-240000000000"
});
var vategoryView = new CategoryView({
    model : category
});

category.fetch();

Что я делаю:

  1. Создать магистральную модель категории
  2. Создание основного представления CategoryView
  3. Получить данные из веб-службы отдыха, которая возвращает объект данных JSON. Отобразите полученные данные в div "#category-details". В браузерах я вижу, что метод "fetch()" работает, потому что я вижу, что мой объект JSON возвращается

Вот HTML-код:

<div id="category_details">details:</div>

<script type="text/template" id="category-details">
<label>Id:</label>
<input id="id" name="id" type="text" disabled />

<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>"/>
 </script>

Проблема в том, что данные не отображаются в html. Как я могу отобразить данные в html?


backbone.js backbone-model backbone-views
person mariami    schedule 09.12.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Ваше представление не обрабатывает изменения в модели, что означает, что представление не перерисовывается после завершения model.fetch.

Попробуйте связать событие изменения из модели:

window.CategoryView = Backbone.View.extend({
    el : $('#category_details'),
    template : _.template($('#category-details').html()),
    initialize : function() {
        this.render();
        this.model.on('change', this.render, this);
    },
    render : function(eventName) {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});

И демо http://jsfiddle.net/Hzm5Y/

Обратите внимание, что Underscore не любит, когда вас просят отображать неопределенные переменные, вам, вероятно, следует добавить значения по умолчанию в вашу модель:

window.Category = Backbone.Model.extend({
    urlRoot : "../myWs/category/",
    defaults: {
        name: ''
    }
});
person nikoshr    schedule 09.12.2012