Ember-Model EmbeddedHasManyArray не обновляется в каждом помощнике шаблона

Я использую модель ember для простого приложения выставления счетов, я новичок в ember и не могу исправить то, что здесь происходит, в основном я использую hasMany модели ember для встроенных вложенных данных (элементы для каждого счета находятся в массиве), я попытался поместить код в jsbin и jsfiddle, но там это не сработало, поэтому для тех, у кого есть время помочь, я помещаю архив в свой почтовый ящик здесь: Ember-Model hasMany не обновляется в {{#each}} шаблона

Чтобы воспроизвести ошибку, перейдите к счету-фактуре, затем перейдите к другому счету-фактуре, используя ссылки, просмотрите элементы, которые не обновляются, как будто они застряли, но если вы перезагрузите страницу, вы получите нужные элементы, что я делаю неправильно:/?

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

Спасибо всем, кто хочет помочь.

Index.html

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Ember - Starter" />
  <meta charset=utf-8 />
  <title>Ember-Model</title>
  <script src="libs/jquery-1.9.1.js"></script>
  <script src="libs/handlebars-1.0.0.js"></script>
  <script src="libs/ember-1.1.2.js"></script>
  <script src="libs/ember-model-latest.js"></script>
  <script src="app.js"></script>
</head>
<body>

<script type="text/x-handlebars">
  <h1>Invoices</h1>
  {{ outlet }}
</script>

<script type="text/x-handlebars" data-template-name="factures">
{{#each}}
    <ul>
        <li>{{#link-to 'facture' this}}{{title}}{{/link-to}}</li>
    </ul>
{{/each}}
  <hr/>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="facture">
<h2>Items for {{title}}</h2>
{{#each items}}
<ul>
  <li>{{desc}}</li>
</ul>
{{/each}}
</script>

</body>
</html>

App.js

var App = Ember.Application.create();

// ROUTER
App.Router.map(function () {
    this.resource('factures', function () {
        this.resource('facture', {
            path: '/:facture_id'
        });
    });
});

App.FacturesRoute = Ember.Route.extend({
    model: function (params) {
        return App.Facture.find();
    }
});

App.FactureRoute = Ember.Route.extend({
    model: function (params) {
        return App.Facture.fetch(params.facture_id).then(function (modelData) {
            return App.Facture.find(params.facture_id);
        });
    }
});

// Redirect
App.IndexRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo('factures');
    }
});


// MODELS
var attr = Ember.attr,
    hasMany = Ember.hasMany,
    belongsTo = Ember.belongsTo;

// Factures
App.Facture = Ember.Model.extend({
    title: attr(),
    items: hasMany('App.Item', {
        key: 'items',
        embedded: true
    })
});

App.Facture.adapter = Ember.FixtureAdapter.create();

// Facture
// -> [ Items ]
App.Item = Ember.Model.extend({
    desc: attr(""),
    qty: attr("number"),
    price: attr("string")
});

// FIXTURES

App.Facture.FIXTURES = [
{
    id: 1,
    title: "Invoice #1",
    items: [
        {id: 1, desc: 'An Item for #1', qty: 2, price: "45"}, 
        {id: 2, desc: 'An Item for #1', qty: 5, price: "75"}
    ]
}, 
{
    id: 2,
    title: "Invoice #2",
    items: [
        {id: 1, desc: 'An Item for #2', qty: 2, price: "250"},
        {id: 2, desc: 'An Item for #2', qty: 5, price: "200"}
    ]
}];

2 ответа

Решение

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

http://emberjs.jsbin.com/eKibapI/1/edit

App.Facture.FIXTURES = [
{
    id: 1,
    title: "Invoice #1",
    items: [
        {id: 1, desc: 'An Item for #1', qty: 2, price: "45"}, 
        {id: 2, desc: 'An Item for #1', qty: 5, price: "75"}
    ]
}, 
{
    id: 2,
    title: "Invoice #2",
    items: [
        {id: 3, desc: 'An Item for #2', qty: 2, price: "250"},
        {id: 4, desc: 'An Item for #2', qty: 5, price: "200"}
    ]
}];

Я не уверен, почему ты упаковываешь App.Facture.find() в App.Facture.fetch(), Обратите внимание, что способ его настройки return вашей функции обратного вызова не будет возвращен вашим model крюк. Попробуйте следующее:

App.FactureRoute = Ember.Route.extend({
    model: function (params) {
        return App.Facture.find(params.facture_id);
    }
});

Конечно, это также поведение по умолчанию, поэтому вы должны иметь возможность просто удалить все App.FactureRoute,

Другие вопросы по тегам