products.index에 비어있는 제품이 표시되는 이유는 무엇입니까?

Question

이 내 products.index이 모습입니다 : 내가 클릭하면 링크 "제품 만들기"

. 그것은 나를 /products/new으로 보낸다. 거기에 양식이 보이지만 제출하지 말고 대신 "취소"버튼을 클릭하십시오. 내 컨트롤러에서 products.index 페이지로 리디렉션되는 작업이 있습니다.

actions: { 
    cancel: function() { 
     this.transitionToRoute('products.index'); 

     return false; 
    } 
    } 

는 /products, 난을 참조하십시오

빈 제품입니다

...을 API의 DB는 어떤 제품이 없습니다. 페이지를 새로 고치면 빈 제품이 사라집니다. 여기서 뭐하는거야?

전체 코드 : (비 엠버 - 전문가 등)

// app/routes/products/index.js 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
    return this.store.find('product'); 
    } 
}); 

// app/routes/products/new.js 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
    return this.store.createRecord('product'); 
    }, 
}); 

// app/controllers/select-addresses/new.js 
export default Ember.ObjectController.extend({ 
    actions: { 
    cancel: function() { 
     this.transitionToRoute('products.index'); 

     return false; 
    } 
    } 
}); 

// app/templates/products/index.hbs 
<h1>Products index</h1> 

<p>{{#link-to 'products.new'}}Create product{{/link-to}}</p> 

<ul> 
    {{#each}} 
    <li> 
    {{#link-to 'products.show' this}}<strong>{{name}}</strong>{{/link-to}} 
    <br />Description: {{description}} 
    <br />Amount in cents: {{amountInCents}} 
    <br />{{link-to 'Edit' 'products.edit' this}} &middot; <a href="#" {{action "delete" this}}>Delete</a> 
    <br /><br /> 
    </li> 
    {{/each}} 
</ul> 

// app/templates/products/new.hbs 
<h1>Add a new friend</h1> 

<form {{action "save" on="submit"}}> 
    <p> 
    <label>Name: 
     {{input value=name}} 
    </label> 

    {{#each error in errors.name}} 
     <br />{{error.message}} 
    {{/each}} 
    </p> 

    <p> 
    <label>Description: 
     {{input value=description}} 
    </label> 

    {{#each error in errors.description}} 
     <br />{{error.message}} 
    {{/each}} 
    </p> 

    <p> 
    <label>Amount in cents: 
     {{input value=amountInCents}} 
    </label> 

    {{#each error in errors.amountInCents}} 
     <br />{{error.message}} 
    {{/each}} 
    </p> 

    <p> 
    <label>Status: 
     {{input value=status}} 
    </label> 

    {{#each error in errors.status}} 
     <br />{{error.message}} 
    {{/each}} 
    </p> 

    <input type="submit" value="Save"/> 
    <button {{action "cancel"}}>Cancel</button> 
</form> 

{{outlet}} 

Answer 1

사용 ember-data-route 한 다음

{{#each product in model}} 
    {{#unless product.isNew}} 
    {{product.name}} 
    {{/unless}} 
{{/each}} 

을해야 당신이 ember-data-route를 사용하지 않으려면, 당신은 항상 resetController을 사용하고 model.deleteRecord()을 할 수 있습니다.

// app/routes/products/new.js 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
    return this.store.createRecord('product'); 
    }, 

    resetController: function (controller, isExiting) { 
    var model = controller.get('model'); 

    if (isExiting && model.get('isNew')) { 
     model.deleteRecord() 
    } 
    } 
}); 

자세한 내용은 ember-data-route is doing을 참조하십시오.

Answer 2

내 생각 : 당신의 Ember.Route.extend에서

이

모델을 위해, 당신은 store.createRecord에 대한 호출을 실행합니다. 이렇게하면 빈 제품을 상점에 추가 할 수 있습니다. 양식을 취소하면 저장소에서 더미 제품을 제거하지 않으므로 인덱스보기를로드 할 때 여전히 그대로 남아 있습니다.

Answer 3

그래서 제품 색인 노선에, 나는 return this.store.find('product', {});

에 return this.store.find('product');를 변경하고 문제가 도망 갔어요! 이것이 올바른 접근인지는 확실치 않지만, 지금까지 아무런 문제가 없습니다!

// app/routes/products/index.js 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
    // Before 
    // return this.store.find('product'); 

    // After 
    return this.store.find('product', {}); 
    } 
}); 

---

UPDATE : 전환도 작동하는 것 같다 전에 this.store.unloadAll('product');을하는. 이것은보다 자연스러운 해결책 인 것 같습니다. 이 풀 요청 당 as https://github.com/emberjs/data/pull/1714

그러나 브라우저에서 뒤로 단추를 클릭해도 여전히 빈 제품이 렌더링됩니다. 그래서 기본적으로

:

// app/routes/products/index.js 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
    return this.store.find('product'); 
    } 
}); 

// app/controllers/select-addresses/new.js 
export default Ember.ObjectController.extend({ 
    actions: { 
    cancel: function() { 
     this.store.unloadAll('product'); 
     this.transitionToRoute('products.index'); 

     return false; 
    } 
    } 
}); 

Answer 4

deactivate 경로 훅을 사용하여 저장소에서 새로운 (지속되지 않는) 레코드를 삭제할 수 있습니다.당신이 .save()와 기록을 지속하지 않고 멀리 경로에서 전환 할 때

// app/routes/products/new.js 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model: function() { 
    return this.store.createRecord('product'); 
    }, 
    deactivate: function() { 
    var model = this.modelFor('products.new'); 
    if (model.get('isNew')) { 
     model.destroyRecord(); 
    } 
    } 
}); 

, 그것은 저장소에 기록을 파괴 할 것이다, 따라서 템플릿에서 렌더링되지 않습니다.