Выборка и сброс модели магистрали при добавлении модели в коллекцию

У меня есть здесь

Содержит модель

Item = Backbone.Model.extend({....})
Apvdtl = Backbone.Model.extend()

и коллекция

Apvdtls = Backbone.Collection.extend({
    model: Apvdtl
})

и заполните коллекцию моделью Apvdtl, например.

apvdtls.add([{ itemid: 'c4676cef679a11e28b7a3085a942bd8e', qty: 10 }, 
             { itemid: '1da17339690f11e285d63085a942bd8e', qty: 5 }])

и сгенерировал это представление

grid1

но то, что я пытаюсь сделать, это сделать вид, подобный этому

grid2

путем получения элемента с идентификатором в этом файле JSON

ApvdtlView = Backbone.View.extend({
    tagName: 'tr'
    initialize: function(){
        this.model.on('change', this.render, this);
        this.template = _.template('<td><%=itemid%></td><td><%=qty%></td>');
    },
    render: function(){

        item.set({'id': this.model.get('itemid')});
        // item = {id: 'c4676cef679a11e28b7a3085a942bd8e'}

        item.fetch(); // but this doesnt get the data
        // this should contain this data after i fetch 
        // item = {"id": "c4676cef679a11e28b7a3085a942bd8e",
        //         "code": "prp125", "descriptor": "Paper", "price": "7.00"}

        // build new data to render
        var data = {
            "itemid": item.get('descriptor'),
            "qty": this.model.get('qty')
        }

        this.$el.html(this.template(data));
        //this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

backbone.js underscore.js backbone-model
person jrsalunga    schedule 23.07.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, Ajax — это асинхронный . Так что вы никогда не знаете, когда придет ответ, поэтому лучше привязать его к событию.

ApvdtlView = Backbone.View.extend({
    tagName: 'tr',
    initialize: function () {

            // This listens to the sync and change event and renders the item
        this.listenTo(this.model, 'change sync', this.render);
        this.template = _.template('<td> <%=itemid%> </td>' +
            '<td><%=qty%></td>');
        this.model.fetch();

    },
    render: function () {

        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

Следующее свойство url должно быть установлено для модели ApvdtlView, так как она загружается с сервера.

Далее вы не можете перейти по этому URL-адресу из своего домена.

urlRoot: 'https://raw.github.com/jrsalunga/prism2/master/www/api/item.json'

поскольку это другой домен, поскольку он нарушает политику перекрестного происхождения. Вам нужно использовать jsonp, чтобы получить это

Проверить Fiddle

Скрипка запроса JSONP

Теперь вы можете видеть данные, которые извлекаются на вкладке сети, но выдает ошибку, поскольку обратный вызов должен обрабатываться на стороне сервера.

person Sushanth --    schedule 23.07.2013
comment
Спасибо за ответ! =), но моему представлению (ApvdtlView) не нужен URL-адрес, потому что я просто использую его для рендеринга данных из коллекции (Apvdtls). Что касается URL-адреса https://raw.github.com/jrsalunga/prism2/master/www/api/item.json, я просто пытаюсь получить данные и не предназначен для сохранения. Данные для представления (ApvdtlView) взяты из двух моделей: модели (Item) и из этого кода apvdtls.add([{ itemid: 'c4676cef679a11e28b7a3085a942bd8e', qty: 10 }]), поэтому я просто создаю новый набор данных для своего представления (ApvdtlView), а не для моего 'ApvdtlView's model(Apvdtl`) - person jrsalunga; 24.07.2013