Ember-Model EmbeddedHasManyArray未在模板的每个帮助器中更新

Question

I am using ember-model for a simple invoicing app, i am new to ember and i cannot fix what's happening here, basically i am using ember-model's hasMany for embedded nested data, (the items for each invoice are in an array), i tried putting the code on jsbin and jsfiddle but it doesn't work up there, so for those who have time to help i put up an archive on my dropbox here : Ember-Model hasMany not updating in template's {{#each}} 我正在为一个简单的发票应用程序使用ember-model，我是ember的新手，我无法解决这里发生的事情，基本上我是在嵌入嵌套的数据中使用ember-model的hasMany，（每个发票的项目都在一个数组中），我尝试将代码放在jsbin和jsfiddle上，但是在那里没有用，所以对于那些有时间帮助的人，我在这里的保管箱中放了一个档案： Ember-Model hasMany没有在模板的{{#each}}中更新

To reproduce the bug, navigate to an invoice, then navigate to another invoice using the links, watch the items not updating as if they were stuck, but if you reload the page you will get the right items, what am i doing wrong :/ ? 要重现该错误，请导航至一张发票，然后使用链接导航至另一张发票，观看未更新的项目，好像它们被卡住了一样，但是如果重新加载页面，您将获得正确的项目，我在做什么错了：/ ？

The following code is of course a very simplified version of my actual app but it does reproduce the bug.. 以下代码当然是我实际应用程序的非常简化的版本，但它确实重现了该错误。

Thanks to anyone willing to help. 感谢任何愿意提供帮助的人。

Index.html 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 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"}
    ]
}];

Answer 1

Your items id's should be unique, ember model doesn't care if it's embedded or not, if it sees the same id it returns the model that's already existing for that id. 您的商品ID应该是唯一的，ember模型不在乎是否嵌入，如果看到的ID相同，则返回该ID已经存在的模型。

http://emberjs.jsbin.com/eKibapI/1/edit 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"}
    ]
}];

Answer 2

I'm not sure why you're wrapping App.Facture.find() in App.Facture.fetch() . 我不确定为什么要在App.Facture.find()中包装App.Facture.fetch() 。 Note that the way it is set up the return of your callback function will not be returned by your model hook. 请注意，它被设置在途中return回调函数的不会被你返回model挂钩。 Try the following: 请尝试以下操作：

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

Of course this is also the default behavior, so you should be able to just remove the entire App.FactureRoute . 当然，这也是默认行为，因此您应该能够删除整个App.FactureRoute 。

Ember-Model EmbeddedHasManyArray未在模板的每个帮助器中更新

问题描述

Index.html Index.html

App.js App.js

2 个解决方案

解决方案1
0 已采纳 2013-11-23 00:24:44

解决方案2
0 2013-11-23 00:27:08

Ember-Model EmbeddedHasManyArray未在模板的每个帮助器中更新

问题描述

Index.html Index.html

App.js App.js

2 个解决方案

解决方案1 0 已采纳 2013-11-23 00:24:44

解决方案2 0 2013-11-23 00:27:08

解决方案1
0 已采纳 2013-11-23 00:24:44

解决方案2
0 2013-11-23 00:27:08