Ember.js fixture 어댑터 ID 루프 for 루프를 사용하여 생성 된 데이터를 생성했습니다.

Question

Ember를 사용하여 간단한 작업을 수행하려고합니다. 일부 이미지를 디렉토리에 드롭하고 엠버 앱에 해당 이미지를 표시하고 싶습니다. 필자가 생각한 해결책은 for 루프가 순차적으로 번호가 매겨지면 디렉토리의 이미지에 해당하는 조명기 데이터 객체를 생성하는 것이 었습니다.

나는 점점 가까이 것 같다,하지만 난이 오류가 점점 오전 : 발췌 고정 데이터에 표시하는 ID가 있기 때문에, 이상한 것 같다

Uncaught Error: the id property must be defined for fixture "{ id: 1, href: \"public/1.jpg\", style: \"top: 0px; left: 0px\" }"

. 이것은 아마도 데이터가 생성되는 방식에 문제가 있다고 생각하게 만듭니다.

//CONFIG 
var imgsLength = 3 

//JS-PREP 
var imgLinks = []; 

for (i = 0, topvar = 0, left = 0 ; i<imgsLength ; i++, topvar += 10, left += 10) { 
    imgLinks.push('{ id: ' + (i + 1) + ', href: "public/' + (i + 1) + '.jpg", style: "top: ' + topvar + 'px; left: ' + left + 'px" }'); 
} 

//APP 
App = Ember.Application.create({}); 

App.Store = DS.Store.extend({ 
    revision: 12, 
    adapter: DS.FixtureAdapter 
}); 

App.Router.map(function() { 
    this.resource('images', function() { 
    this.resource('image', { path: ':image_id' }); 
    }); 
}); 

App.ImagesRoute = Ember.Route.extend({ 
    model: function() { 
    return App.Image.find(); 
    } 
}); 

var attr = DS.attr; 

App.Image = DS.Model.extend({ 
    href: attr('string'), 
    style: attr('string'), 
}); 

App.Image.FIXTURES = imgLinks; 

과 관련 HBS 코드 :

{{#each model}} 
    {{#linkTo image this}}<div {{bindAttr style="style"}}><img {{bindAttr src="href"}}></div>{{/linkTo}} 
{{/each}} 

생각 여기에 내가 함께 일하고 있어요 전체 코드는?

Answer 1

This is making me think maybe it's an issue in the way the data is being generated?

당신은 문제의 원인이되는 조명기를 생성하는 방법을 추측하고 있습니다. 그래서 대신처럼 수행하려고 :

for (i = 0, topvar = 0, left = 0 ; i<imgsLength ; i++, topvar += 10, left += 10) { 
    var image = {}; 

    image.id = (i + 1); 
    image.href = "public/" + (i + 1) + ".jpg"; 
    image.style = "top: " + topvar + "px; left: " + left + "px"; 

    imgLinks.push(image); 
} 

또한 따옴표로에 당신이 연결되는 경로를 넣어해야합니다

{{#each model}} 
    {{#linkTo 'image' this}}<div {{bindAttr style="style"}}><img {{bindAttr src="href"}}</div>{{/linkTo}} 
{{/each}} 

여기를 참조하십시오 jsbin 작업.

희망이 있습니다.